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

2013/03/152015/05/30

1 min read

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>

SELECTの width とonFocusで指定する width の値が同じであれば良いのです。こうすることでonBlurでプルダウン部分(<option>)を広げた時に一緒に親(<SELECT>)が広がらないようにしています。

ご参考までにどうぞ。