選擇CSS中的選中元素

我有一個關於在下拉列表中選擇元素的問題。這裏是小提琴：http://jsfiddle.net/H656H/選擇CSS中的選中元素

<select id="razred" name="razred"> 
      <option hidden selected><?php echo $razred; ?></option> 
      <option>1.A</option> 
      <option>1.B</option> 
      <option>1.C</option> 
      <option>1.Č</option> 
      <option>1.D</option> 
      <option>1.E</option> 
      <option>2.A</option> 
      <option>2.B</option> 
      <option>2.C</option> 
      <option>2.Č</option> 
      <option>2.D</option> 
      <option>2.E</option> 
      <option>3.A</option> 
      <option>3.B</option> 
      <option>3.C</option> 
      <option>3.Č</option> 
      <option>3.D</option> 
      <option>3.E</option> 
      <option>4.A</option> 
      <option>4.B</option> 
      <option>4.C</option> 
      <option>4.Č</option> 
      <option>4.D</option> 
      <option>4.E</option> 
     </select><br />

所以，我想在用戶單擊它後對元素進行樣式設置。所以，只有當用戶選擇他的選擇時纔會收到樣式。我認爲在下拉菜單中必須有這種選定元素的某種CSS僞選擇器。有沒有任何CSS選擇器？

謝謝大家！

來源

2013-11-27 Blaz Kranjcev

你想要什麼樣的風格？ –

'＃razred'下拉菜單中的元素。其實全部用'

沒有僞選擇器以您想象的方式標記選擇框。所以你原來的問題的答案是：（

但是，如果你不介意使用一小部分的JavaScript，那麼你可以模擬你想要的功能，你可以添加一個類到選擇框的onchange方法。。從一個腳本標籤中的頁面的底部做我米內聯做僅作爲演示：

<select id="razred" name="razred" onchange='this.className="visited"'>

然後你可以只定義自定義類，你要

.visited { 
    color: #f00; 
    -webkit-appearance: none; /*required for webkit based browsers*/ 
}

方式

JS小提琴：http://jsfiddle.net/9K5h2/1

來源

2013-11-27 19:42:31 walmik

編輯：刪除不正確的答案部分。

關於CSS回答您的實際問題：

From a previous question

#razred option:checked { color: red; }

來源

2013-11-27 19:13:12 echochamber

OP的標記沒有問題。如果未提供任何值，則選項標籤內的內容將與表單提交一起發送。 – cimmanon

@cimmanon哦，不知道。謝謝。編輯爲只顯示答案的正確部分:)。 – echochamber

重點選擇會做一些事情，是接近你正在尋找

#razred:focus{ 
    color: blue; 
}

更新fiddle什麼

來源

2013-11-27 19:38:52

問題解決了。它現在有用，謝謝！ –

選擇CSS中的選中元素

回答

相關問題