セレクトボックスの隠れた文字を表示させる方法

Firefox Developer Edition 40.0a2 (2015-05-19) で自動的に幅が調整されるようになったことを確認。

SELECT要素に横幅を指定した結果、長い文字列だと切れて表示されなくなる場合があります。

選択(クリック)された時に、プルダウン部分を大きくさせます。


動作は以下の通り


<SELECT name="hoge" style="width:50px!important;" onFocus="this.style.width='50px'" onBlur="this.style.width='100px'">
    <OPTION value="1">1111111111111111111111111111111111111111</OPTION>
    <OPTION value="2">2222222222222222222222222222222222222222</OPTION>
    <OPTION value="3">3333333333333333333333333333333333333333</option>
</SELECT>

style属性を直接書き込んでいますが、CSSで指定しているのならこの部分は不要です。
SELECTのwidthとonFocusで指定するwidthの値が同じであれば良いのです。
こうすることでonBlurでプルダウン部分(<option>)を広げた時に一緒に親(<SELECT>)が広がらないようにしています。

ご参考までにどうぞ。