3

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

<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>
4

2 に答える 2

3

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

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

ドロップダウン ボックス内で「リッチ」コンテンツを使用するための一般的な回避策は、それを JS ベースのものに置き換えることです (つまり、ドロップダウンが単に要素のリストを含む div である場合)。

于 2012-05-04T10:04:16.950 に答える
0

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

ドロップダウンの例を作成しました。コードは以下にあるか、JSフィドルにアクセスしてください。ここをクリックしてください。

または以下はコードです。

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>

</ p>

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%;}

</ p>

于 2012-05-04T10:35:32.237 に答える