リストボックスの幅を小さくしたいのですが。
以下は私のコードです。
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
このコードは、IE 6では動作しますが、Mozilla Firefox(最新版)では動作しません。どなたか、Firefoxでドロップダウンリストの「幅」を小さくする方法を教えてください。
このコードをお試しください。
<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
CSSです。
#wgtmsr{
width:150px;
}
オプションの幅を変更したい場合は、CSSで変更することができます。
#wgtmsr option{
width:150px;
}
選択肢の幅を上書きするCSSルールに矛盾があるのかもしれません。
[DEMO][1]を参照してください。
important`という引数を使って、指定した他のスタイルとCSSが衝突していないかどうかを確認してください。また、独自のスタイルを追加する前に、reset.cssを使用すると良いでしょう。
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
または
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
cssを作成し、cssコードに値style="width:50px;"
を設定します。ドロップダウンリストでCSSのクラスを呼び出します。そうすれば動作します。