在活动元素上应用CSS而不是其边框

Question

我正在制作一些移动应用程序，其中HTML中有几个标签，并且我已经对这些应用了边框，但没有定义颜色，以使边框与其颜色相符。

这里是一个演示

现在，我想在active状态下更改标签的颜色，但不更改其边框颜色，因此我尝试通过设置initial值来实现，但似乎border-color不支持initial值。

span:active{
    color: red;
    border-color: initial;
}

---

我可以管理每个有颜色的元素的活动状态的边框颜色，但这需要很多工作。有没有标准的方法使元素只改变其元素而不是其边框？

- Bhojendra Rauniyar

---

当在边框上使用“initial”时，它意味着边框将使用“color”CSS - 这意味着它将变为红色：https://developer.mozilla.org/zh-CN/docs/Web/CSS/initial - Pete

Answer 1

您可以设置border-color: inherit:

span:active{
    color: red;
    border-color: inherit;
}

请看这里：盒模型。 fiddle。

- Alex Char

Answer 2

使用inherit而不是initial。

border-color: inherit;

- Mahesh Thumar

Answer 3

将初始值改为继承即可解决问题。

span:active{
color: red;
border-color: inherit;
}

工作中的JS Fiddle：

http://jsfiddle.net/fapr39e7/2/

- Johan Wendesten