select optionのことで聞きたいことが

<select name="" id="" style="height:30px;line-height:30px;">
<option value="" id="item-1">あああ</option>
<option value="" id="item-2">あ</option>
<option value="" id="item-3">ああ</option>
</select>

optionの高さを広げて、さらに▼の位置を変えず、セレクトボックス内の文字位置をセレクトボックス内の縦の真ん中に持っていきたいと思っています。
現実的ではないのは分かっていますが、どうにかクロスブラウザに対応した方法があれば
教えてください。
ずっと悩んでいるのですが、答えが出ず教えてほしいです。
html cssでページはデザインしています。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/09/14 09:40

form select option{text-align:center;}

<select name="slect">
<option value="" selected>選択してください。
<option value="abc">あああ</option>
<option value="efg">あ</option>
<option value="hij">ああ</option>
</select>

　idはnameと同じでなければなりません、value="" id="item-1"はありえません。
　デフォルトの選択selectedを書いておきましょう。選択項目より長く

　text-alignに対応していないブラウザを考慮するなら
<select name="slect">
<option value="" selected>選択してください。
<option value="abc">　　あああ　　</option>
<option value="efg">　　　あ　　　</option>
<option value="hij">　　ああ　　</option>
</select>
しかないでしょう。

この回答へのお礼

ありがとうございます。

お礼日時：2012/09/14 10:55