最近ようやくWordPressの管理画面のカスタマイズにチャレンジしています。独自の設定画面を作っている中で、複数選択のselectタグを使ったところ、意図した通りに表示してくれません。今回はその話です。

ソースコードはこんな感じ。

<select name="country" multiple="multiple">
<option>日本</option>
<option>韓国</option>
<option>中国</option>
<option>:</option>
<option>:</option>
<option>:</option>
</select>

これをブラウザで見てみると、

と、本来A（左）のように表示されるはずが、ほとんどのブラウザでB（右）のように表示されてしまいました（IE7はもっと悲しい表示に）。

原因を調べてみると、/wp-admin/load-styles.phpで読み込んでいるwp-admin.cssに次のような記述があることを確認。

#wpcontent select{
	padding:2px;
	height:2em;
	font-size:11px;
}

heightが2emならこうなって当たり前ですね。

対処としては、IE6を気にしなければ次のようなcssを（後で）読み込むことで回避できるのですが、

#wpcontent select[multiple]{
	height:auto;
}

IE6対応などを考慮するとselectタグに赤字の部分を追加するのが無難なのかな。

<select name="country" multiple="multiple" style="height:auto;">