CSS は選択 (スクリプトなし) 実装にスタイルを追加します

通常 ul と li によってシミュレートされる select のデフォルトのスタイルを変更します。 この方法で選択のデフォルトのスタイルを変更する Jquery プラグインが多数あります。
プログラマーからのフィードバックによると、この方法ではフォーム送信後にデータを取得できないとのことで、その後、別のJS/Jqueryプラグインを使用して実験しましたが、結果は同じでデータを取得できませんでした。

その後、外国人が書いたブログを読みました。CSS スタイルを使用して選択範囲の外側に div を追加し、選択範囲の幅を親 div の幅より小さく設定し、デフォルトの矢印のスタイルを変更しました。 div の背景属性を設定して選択します。 この方法は、スクリプトを書かずに、単純な CSS だけを使用する良い方法です。

ただし、この方法には欠点もあります。IE シリーズでは、オプションを選択すると背景のカラー ブロックが表示されます。このバグはすべて発生します。
Opera では div の背景画像が表示されないように設定されています。つまり、選択のドロップダウン矢印が表示されません。その理由はわかりません。

htmlコード:

<div class="select_style"> 
<select name="select"> 
<option>AAAAAAAAAAA</option> 
<option>BBBBBBBBBBB</option> 
<option selected>CCCCCCCCCCC</option> 
<option>DDDDDDDDDDD</option> 
</select> 
</div>

CSSコード:

.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*/ 
}

以上がCSS は選択 (スクリプトなし) 実装にスタイルを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。