ドロップダウンで単語の色を付けるにはどうすればいいですか？

Question

テキスト全体に色付けする代わりに、各単語をドロップダウンで色付けしたいのですが、これはうまくいかないでしょうか？

<select> 
    <option> Entry <span style="color:red">One</span> </option> 
    <option> Entry <span style="color:red">Two</span> </option> 
    <option> Entry <span style="color:red">Three</span> </option> 
</select> 

Answer 1

ネイティブ<select>要素では不可能です。

<option>タグのCSS colorプロパティを設定すると、オプション全体を色付けできます。

ドロップダウンボックス内の「リッチ」コンテンツを使用する一般的な回避策は、JSベースのものに置き換えます（つまり、ドロップダウンは単に要素のリストを含むdivです）。

Answer 2

ええ、@ ThiefMasterは<select>要素を選択できません。しかし、ドロップダウンリスト（またはdiv）を作成するために、順序付けられていないリストをいつでも作成できます。私は通常、<ul>で作成し、jQueryまたはCSSトランジションを使用してアニメートします。

私はドロップダウンリストの例を作成しました。コードはJS Fiddleの下にあります。 click here。

以下はコードです。

HTML

<ul> 
<li><a href="#">About</a> 
    <ul> 
    <li><a href="#">History</a></li> 
    <li><a href="#">Team</a></li> 
    <li><a href="#">Offices</a></li> 
    </ul> 
</li> 

CSS

ul li{width: 100px;} 

ul li a{ 
    background: red; 
    padding: 5px; 
    display: block; 
    border-bottom: 1px solid black; 
} 

ul li ul li:first-child a{ 
    color: white; 
} 

ul li ul li{ 
    height: 0; 
} 

ul li:hover ul li{height: 100%;} 

残念です