4

私はすでにこれをどこでも探しましたが、どこにも見つかりませんでした。それは不可能だと思い始めています。私の質問はこれです：

選択ボックスの選択値である CSS でスタイルを設定することはできますか?

このコードをクラス pretty-select で使用して、選択ボックス全体のスタイルを設定しています!

  <div class="pretty-select">
    <select name="city" class="city">
      <option value="Porto" selected="selected">Porto</option>
      <option value="Penafiel">Penafiel</option>
      <option value="Lisboa">Lisboa</option>
      <option value="Madrid">Madrid</option>
      <option value="Barcelona">Barcelona</option>
    </select>
  </div>

ありがとうございます！乾杯

4

2 に答える 2

3

残念ながら、あなたが求めることは、純粋な CSS を使用することでは不可能です。ただし、回避策として選択できる同様のものを次に示します。

ライブコードを確認してくださいhttp://jsfiddle.net/Etr4F/

HTML:

<div>
Select
<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>
</div>

CSS:

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

乾杯！！

于 2012-05-03T12:36:22.687 に答える
1

jQuery UI の使用に抵抗がない場合は、好きなだけカスタマイズできます。

http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

于 2012-05-03T12:31:18.880 に答える