このエントリーをはてなブックマークに追加 Twitterでツイート WordPressの管理画面で複数選択なselectを

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

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

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

これをブラウザで見てみると、
multiple指定した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;">
投稿日:2010年2月26日
  • ※コメントは、スパム対策などのためIPアドレスにて制限しております。
  • ※誹謗や中傷、スパムなど、不適切な内容は公開いたしません。ご了承ください。