Как правильно настроить поле «Выбор формы CSS», если содержимое больше изображения

Question

Я настроил внешний вид и поле выбора моей формы с помощью следующего кода:

.formbox select { width:240px; border:0; padding:11px 15px; font:normal 12px Arial, Helvetica, sans-serif; color:#000; margin-top:5px; background: url(../images/search_bg.gif) left top no-repeat; }

поле работает хорошо, за исключением случая, когда содержимое в моем поле выбора шире, чем 240 пикселей.

Если я удаляю поле ширины, выпадающий список в порядке, но моя настоящая кнопка выбора расположена справа от фона поля.

Если я изменяю ширину, изображение, которое я имею длямоя ширина искажена и / или недостаточно длинна, поэтому она выглядит липкой.

Возможно ли иметь поле выбора на одной ширине и любое раскрывающееся содержимое на другой?

EDIT

Я нашел эту ссылку: Ширина выпадающего списка в IE , но я не собираюсь использовать JS вообще.

Answer 1

Вы не сможете сделать этот кросс-браузер. Некоторые браузеры допускают ограниченную настройку отдельных элементов, но в целом это не стоит усилий.

Если вам действительно нужен индивидуальный вид, я бы порекомендовал использовать полное решение javascript.