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

Question

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

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

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

我已经将图标嵌入到带有Psuedo Class的search按钮中:before

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

我希望能够在按钮打开时将更改darkorange为。white:focus

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

这是JS 小提琴。

Answer 1

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

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

看看下面的小提琴。