Расширяя поле выбора

Question

Мне было просто интересно, знает ли кто-нибудь, как установить выпадающий / выбранный блок на фиксированную ширину, например 125px, но когда вы откроете его, выпадающая часть автоматически расширится до самого большого элемента в списке, и когда вы выбираете элемент, размер выпадающего меню снова достигает размера 125px?

Это происходит в FF, но в настоящее время нет в IE.

Спасибо заранее, B

Answer 1

Чтобы достичь желаемого эффекта, я думаю, вам нужно будет использовать либо некоторые свойства CSS 3 (которые не будут работать во всех браузерах), либо, что более вероятно, некоторый Javascript.

Вы можете использовать события onFocus и onBlur поля выбора, а затем соответствующим образом обновить свойство style.width. Дайте мне знать, если вам нужны примеры кода!

Answer 2

Вот быстрое решение jQuery, которое изменит размер поля выбора для вас в mousedown, а затем вернет его обратно, как только что-то будет выбрано, или вы щелкнете.

var example = $('#some-id');

$(example).mousedown(function() {
        $(this).css('width','400px');                            
});
$(example).blur(function({
        $(this).css('width','200px');                            
});
$(example).change(function() {
        $(this).css('width','200px');                            
});

Answer 3

вы можете установить ширину с помощью CSS, используя ширину: 125 пикселей.

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