Clever Geek Handbook

Css on active element but not border

I am making mobile apps that have multiple tags span

in the html and I have applied a border to a range without defining a color so that the border is by color.

here is a demo

So now I wanted to change the color of the tags span

to active

but not the border, which is why I tried to do this by setting the value initial

, but there seems to be no support for the initial value in the border color.

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

I can control the color of a colored item with an active state, but it takes a lot of work. Is there a standard way to make an element change only on its element, but not on it?

+3


source to share


3 answers


You can install border-color: inherit

:

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


Look here: box model

violin

+3


source


use inherit not initial.



border-color: inherit;
+3


source


Going from initial to inheritance will do the trick

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

Working JS script:

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

+1


source






More articles:


All Articles