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

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

その後、外国人が書いたブログを読みました。彼は CSS スタイルを使用して、select の外側に div を追加し、select の幅を親 div の幅よりも小さく設定し、div の background 属性を設定することで、select のデフォルトの矢印のスタイルを変更していました。
この方法は良い方法です。スクリプトを書く必要はなく、純粋な CSS のみを使用して実装します。

ただし、この方法にも欠陥があります。IE シリーズでは、特定のオプションを選択すると背景に色のブロックが表示されます。IE7 から IE10 まですべてこのバグがあります。
Opera では、div の背景画像が表示されません。つまり、選択のドロップダウン矢印が表示されません。原因がわかりません。
次のコード

コードをコピー

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

<div class="select_style">
<名前を選択="選択">
<option>AAAAAAAAAA</option>
<option>BBBBBBBBBB</option>
<オプションが選択されました>CCCCCCCCCCC</オプション>
<option>DDDDDDDDDD</option>
</選択>
</div>

コードをコピー

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

.select_style {幅:240px; 高さ:30px; オーバーフロー:非表示; 背景:url(../images/arrow.png) 繰り返しなし 215px;
境界線:1px実線 #ccc;
-moz-border-radius: 5px; /* Gecko ブラウザ */
-webkit-border-radius: 5px; /* Webkit ブラウザ */
境界線の半径:5px;
}
.select_style select { パディング:5px; 背景:透明; 幅:268px; フォントサイズ: 16px; 境界線:なし; 高さ:30px;
-webkit-appearance: none; /*Webkit ブラウザ用*/
}

<<: Docker で onlyoffice をインストールして展開する詳細なプロセス

>>: MySQLはbinlogを通じてデータを復元する