問題
少なくとも使用するだけの場合、これは不可能ですmax-width
(解決策については以下を参照)。s はインタラクティブなコンテンツ要素であり、フォーム コントロール要素であるため、スタイルを<select>
設定するのは常に少し難しいです。そのため、いくつかの暗黙のルールに従う必要があります。1 つには、 を使用する場合、選択範囲をそのオプションの 1 つより狭くすることはできません。次のシナリオを考えてみてください。 max-width
+------------------------------------+-+
|別のエントリ |v|
+------------------------------------+-+
|別のエントリ |
|ボックスを選択してください。何でも選択してください |
|別のエントリ |
|別のエントリ |
+------------------------------------+-+
これを絞りたいとしましょう<select>
- どうなりますか? 選択の幅が狭くなるまで...
+------------------------------------+-+ +--------------------- --------------------------+-+
|別のエントリ |v| |別のエントリ |v|
+------------------------------------+-+ +--------------------- --------------------------+-+
|別のエントリ | |別のエントリ |
|ボックスを選択してください、何でも選択してください |-->|ボックスを選択して、何でも選択してください |
|別のエントリ | |別のエントリ |
|別のエントリ | |別のエントリ |
+------------------------------------+-+ +--------------------- --------------------------+-+
| |
+-----------------------------------------------------+
v
+------------------------------------+-+ +----------------------- ----------------------+-+
|別のエントリ |v| |別のエントリ |v|
+------------------------------------+-+ +----------------------- ----------------------+-+
|別のエントリ | |別のエントリ |
|ボックスを選択してください。何でも選択してください |-->|ボックスを選択して、何でも選択してください|
|別のエントリ | |別のエントリ |
|別のエントリ | |別のエントリ |
+------------------------------------+-+ +----------------------- ----------------------+-+
そして、<option>
s が収まらなくなるため、プロセスは停止します。厄介なクセを得ることなく、スタイルを設定することはできないこと、<option>s
または少なくとも少しだけ (色、フォントのバリエーション) を設定することはできないことに注意してください。ただし、select が正しく準備されていれば、border-box を変更できます。
ソリューション
width
の値を使用しますselect
。はい、次のように簡単です。
<fieldset style="background:blue;">
<select name=countries style="width:100%;max-width:90%;">
<option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
</fieldset>
なぜこれが機能するのですか?は の を正しく認識し、 に暗黙的な を強制しないoption
ためです。は以上であるため、ばかげていることに注意してください。ほとんどのブラウザは、上限を提供するため、この場合は気にせず使用しません。width
select
select
min-width
width
max-width
max-width
JSFiddle デモ(FF12、Chrome 18、IE9、Opera 11.60 で動作)
編集
ラッパーベースのソリューション、これは元の幅を変更しません:
<fieldset style="background:blue;">
<div style="display:inline-block;max-width:90%;"> <!-- additional wrapper -->
<select name=countries style="width:100%">
<option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
</div>
</fieldset>
JSFiddle デモ(上記のブラウザーで動作)