0

私はこのマークを持っています

<div class="styled-offer">
  <select style="font-size:13px;" class="select offer-select" name="type">  
    <option selected="" class="selected" value="1">Sell Offers</option>
    <option value="2">Buy Offers</option>
    <option value="3">Products</option>
    <option value="4">Companies</option>
    <option value="5">Business Directory</option>
    <option value="6">Classified</option>
  </select>
</div>

ここで、最初に選択されたオプションが [オファーの販売] であることがわかります。ここで、選択したオプションを赤色にし、残りのオプションをすべて黒色にする必要があります。このサイトのように。ここでは、オプション製品がデフォルトで青色で、オプションをクリックすると色が黒色であることがわかります。だからこれだけ欲しい。cssで作りたいです。jQuery にはありません。それで、誰かが親切にこれを行う方法を教えてもらえますか？どんな助けや提案も本当に価値があります。

更新 申し訳ありません..マークアップを変更できませんので、このマークアップで親切にガイドしてください...

4

3 に答える 3

2

すべての回答に感謝しますが、最終的に解決策が得られました。とても簡単でした...私のマークアップはこんな感じでした

<div class="styled-offer">
  <select style="font-size:13px;" class="select offer-select" name="type">  
    <option selected="" class="selected" value="1">Sell Offers</option>
    <option value="2">Buy Offers</option>
    <option value="3">Products</option>
    <option value="4">Companies</option>
    <option value="5">Business Directory</option>
    <option value="6">Classified</option>
  </select>
</div>

これで、CSSは次のようになります。

<style type="text/css">
  .styled-offer select.offer-select {
    color: #F00;
  }
  .styled-offer select.offer-select option {
    color: #333;
  }
  </style>
于 2013-02-19T09:42:35.750 に答える
1

「選択した」CSS クラスを、それ自体spanではなく に適用してみてください。option

<option selected="" value="1"><span class="selected" >Sell Offers</span></option>
于 2013-02-19T08:04:56.407 に答える
0 
http://tympanus.net/Tutorials/CustomDropDownListStyling/index.html

デフォルトのドロップダウンを使用している場合、カスタムドロップダウンを試すことはできません。このリンクを試すと役立つ場合があります。

于 2013-02-19T08:30:19.153 に答える