IE6にてsizeを2以上にした時のSelectの表示について

質問

お世話になります。当方はWindows XP SP2、IE6を使用しています。
selectタグにて、sizeを2以上にするとリスト選択型になりますが、
この時、枠組みがくぼんで影がつき、外側のラインとくぼみのラインで
2重の表示になってしまいます。
size="1"のドロップダウン型だとラインが1本ですっきりとしています。

Firefox3や、Chromeだとsize="1"でもsize="2"でもすっきりと表示されます。
IE6でも同様に1本の表示にしたいのですが、何か良い方法はありますでしょうか。

よろしくお願いいたします。

回答No.2

abril · ベストアンサー

仕様ですね。

【引用元】http://programming-magic.com/?id=64
「IE6では、selectタグはWindowsのコントロールを使用して表示されている。そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。」

例えば、下記の様なサンプルで検証した場合、
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<form action="#">
<p>
<select class="droplist" name="sample" size="5">
<option value="sample1" selected>サンプル1</option>
<option value="sample2">サンプル2</option>
<option value="sample3">サンプル3</option>
<option value="sample4">サンプル4</option>
<option value="sample5">サンプル5</option>
</select>
</p>

<p>
<select class="droplist" name="sample" size="1">
<option value="sample1" selected>サンプル1</option>
<option value="sample2">サンプル2</option>
<option value="sample3">サンプル3</option>
<option value="sample4">サンプル4</option>
<option value="sample5">サンプル5</option>
</select>

<input class="sample" type="text" name="hoge" value="ほげ">
</p>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
select.droplist {
width: 200px;
border: solid 1px #00c;
background: #cfc;
color: #c00;
text-align: center;
}
input.sample {
width: 200px;
border: solid 1px #00c;
background: #cfc;
color: #c00;
text-align: center;
}
---------------------------------------------------------------------
IE6/7、Firefox等問わず、inputの方は、ボーダー・背景色・文字色・センタリング全てのスタイルが適用されます。
しかし、selectの方は、Firefox等ではinputと同様に全てのスタイルが効いていますが、IE6/7では背景色と文字色以外は無効になっています。
※IE7ではz-indexのみ正しい挙動になる様に改良されている様ですが。IE8は未入手なので検証できていません。

お礼

abril様、ご回答ありがとうございます。

> 「IE6では、selectタグはWindowsのコントロールを使用して表示されている。そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。」

残念ながら、なぜか引用元にアクセス出来ませんでしたが、
Windowsのコントロールを使用しているということで納得しました。
IE6だけでなくIE7までお試しいただきまして、ありがとうございました。
踏ん切りがつきましたので、気にしない方向で進めたいと思います。

回答No.3

abril

ANo.2です。書き漏らしましたので追記です。
select、input共に"width: 200px;"もどちらの環境でも有効です。

回答No.1

font_color

こんにちは。
<select>のリスト表示については、ある程度までしか設定できません。IEの使用だと思います。

ちなみに今回のラインが2重の表示になる件についてはCSSでboderを指定しても変更できませんでした。

また、それらしく見えたと思っていても閲覧者がXPのテーマを変更したら表示は変わります。

お礼

font_color様、ご回答ありがとうございます。
色々とお試しいただいたみたいでお手数をおかけしました。
やはり仕様上難しいということですね。size=1の時は綺麗なんですけどね～。
踏ん切りがつきました。ありがとうございました。