ドロップダウンリストの幅を変更する方法は？

質問

リストボックスがあるのですが、その幅を小さくしたいです。

以下は私のコードです。

<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>

このコードはIE6では動作しますが、Mozilla Firefox（最新版）では動作しません。どなたか、どうすれば width を減らすことができますか？

どのように解決するのですか？

このコードを試してみてください。

<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ルールに矛盾があるのかもしれません。

デモ