1

このコードはFirefoxでのみ機能し、すべてのブラウザでは機能しませんが:after、他のブラウザでも機能します。

HTML：

<select>
    <option> select </option>
    <option class="red"> one </option>
    <option class="green"> two </option>
    <option class="blue"> three </option>
</select>​

CSS：

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    display: inline-block;
}

option.red:after { background: #c00; }
option.green:after { background: #0c0; }
option.blue:after { background: #00c; }

JSフィドル： http： //jsfiddle.net/abude/EAdvP/

4

1 に答える 1

2

申し訳ありませんが、ほとんどのブラウザでは、スタイルselectやoption要素について多くのCSSの可能性がありません。Firefoxはこの問題に関して非常に寛大です-他の人はそうではありません。

現在の形式では、コードはクロスブラウザーでは機能しないことをお伝えしなければなりません。要素を（Javascriptを使用して）selectいくつかのスタイル可能な要素に置き換えて、ドロップダウンボックスのように機能させるオプションは引き続きあります。それを行うためのライブラリはたくさんあります。

于 2012-08-09T20:56:16.877 に答える