CSS (Font Awesome) - 在没有 Javascript 的情况下更改不同按钮状态的图标颜色

Question

根据标题，我想知道如何用不同的button 状态更改Font Awesome 图标颜色。

例如，我有这些自定义的search 和clear 按钮，如下所示。 我也在使用Bootstrap，类名btn来自Bootstrap。

<button class="btn search">Search</button>
<button class="btn clear">Clear</button>  

我已将图标嵌入到带有:before 伪类的search 按钮

.search:before {
    font-family: 'FontAwesome';
    content: "\f002";
    margin-right: 5px;
    color: darkorange;
}

我希望能够将 darkorange 更改为 white 当 按钮位于:focus。

有没有办法用 CSS 做到这一点？

这是JS Fiddle。

Answer 1

我相信您正在寻找:active 而不是:focus。

.search:active:before, .clear:active:before {
    color: white;
}

看看下面的fiddle。