1. ホーム
  2. Web制作
  3. HTML/Xhtml

選択項目にスタイルを追加するための純粋なcss(スクリプトなし)

2022-01-15 21:43:50
通常、ul,li でモックすることで、select のデフォルトスタイルを変更します。
このようにデフォルトのselectスタイルを変更するJqueryプラグインはたくさんあります。
その後、外国の方が書かれたブログで、cssのスタイルを使ってselectの外にdivを追加し、selectの幅を親divの幅より小さく設定し、divのbackgroundプロパティを設定してselectのデフォルト矢印のスタイルを変えているのを読んだことがあります。
この方法は、スクリプトを書かずに、純粋にcssだけで実現できる方法なので、悪くないと思います。
ただし、この方法には欠点があり、IEシリーズではオプションを選択すると背景色がブロックされる、IE7-IE10ではこのバグがある。
Operaでは、set divの背景画像が表示されない、つまりselectのドロップダウン矢印が表示されないが、これはどういう原因によるものかは不明。
以下のコード
コピーコード
コードは以下の通りです。

<div class="select_style">
<select name="select">
<option>AAAAAAAAAAAA</option>
<option>BBBBBBBBBBBB</option>
<option selected>CCCCCCCCCCCCCC</option>
<option>DDDDDDDDDDDD</option>
</select>
</div>

コピーコード
コードは以下の通りです。

.select_style {width:240px; height:30px; overflow:hidden; background:url(. /images/arrow.png) no-repeat 215px;
border:1px solid #ccc;
-moz-border-radius: 5px; /* Gecko browsers */
-webkit-border-radius: 5px; /* Webkit browsers */
border-radius:5px;
}
.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px;
-webkit-appearance: none; /*for Webkit browsers*/
}