5

選択要素に最小幅が設定された複数選択入力があります。オプションは、Internet Explorer 9 で使用可能な選択ボックスの全幅を占めていません。

Chrome と Firefox では、項目が全幅を占めます。オプション要素が選択入力の全幅を取るようにするにはどうすればよいですか?

SaabInternet Explorer で次の項目に注目してください。

例

このフィドルは問題を示しています

<select style="min-width: 150px; width: auto;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Chrome で正しく動作します。

ここに画像の説明を入力

4

3 に答える 3

2

select と option の両方で css width 属性を 100% に設定すると、select 項目が全幅を埋めました。

デモフィドル

<body>
<form action="form_action.asp">
<select style="min-width: 150px; width: 100%;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</form>
</body>
于 2013-06-04T13:40:17.153 に答える