如何设置：将按钮上的背景颜色对焦

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