選択するスタイルを追加する純粋な CSS (スクリプトなし) 実装_HTML/Xhtml_Web ページの制作

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

その後、外国人が書いたブログを読んで、CSSスタイルを使用してselectの外側にdivを追加し、selectの幅を親divの幅より小さく設定しました。 div の背景属性を設定して選択します。デフォルトの矢印スタイル。
この方法は、スクリプトを記述する必要がなく、単純な CSS のみを使用する優れた方法です。

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

コードをコピーします

コードは次のとおりです:

BBBBBBBBBB

コードは次のとおりです:

.select_style {width:240px; height:30px; background:url( ../images/arrow.png) no-repeat 215px; 🎜>border:1px Solid #ccc;

-moz-border-radius: 5px; /* Gecko ブラウザ */
-webkit-border- radius: 5px; /* Webkit ブラウザ */
半径:5px;
.select_style select { パディング:5px; 幅:268px; ボーダー:なし; ; /*Webkit ブラウザ用*/
}