如何設置：在按鈕上對焦背景顏色

Question

我的問題很少，但我非常困惑，哪裏出問題了。我不能在我的按鈕上設置背景顏色:focus。

我的CSS

span {background: #000; display:inline-block; padding: 13px 1% 7px; text-align: center; width: 50px; cursor:pointer} 
label {background: #fff; display: inline-block; height: 3px; margin: 0 0 5px; vertical-align: middle; width: 100%; cursor:pointer} 
span:hover label{background:red;} 
span:active label{background:green;} 
span:focus label{background:#0ff;} 

和我的HTML

<span id="open"> 
<label></label> 
<label></label> 
<label></label> 
</span> 

請告訴我在哪裏去錯了。

Answer 1

將一個tabindex屬性添加到您的範圍。

<span id="open" tabindex="0"> 

這將允許它是可以聚焦的。然後，您可以通過單擊或切換來設置焦點。你的CSS沒有問題 - 它的工作原理是這樣。見http://jsfiddle.net/rxb9ubxr/1/。

因爲您最後指定了focus規則，所以一旦元素獲得焦點，將永遠不會應用active規則。即使元素具有焦點（換句話說，要在點擊過程中更改顏色），也允許應用active規則，但要顛倒active和focus規則的順序。

span:hover label {background: red;} 
span:focus label {background: #0ff;} 
span:active label {background: green;}