html - CSS "inherit" not working as expected with focus state -
apparently need education on how inherit
value works in css. i'm trying use element using :focus
selector make sure that, on focus, border color doesn't change. i'm doing because want override bootstrap's default behavior creates blue "glow" around focused input elements on forms.
but oddly, when set border-color:inherit
under input:focus
, border goes black on focus. here's jsfiddle demonstrating this. first input
has explicit color under focus
, works fine. second input
uses inherit
goes black on focus.
it's working expected, you're missunderstanding inherit
keyword does.
it takes computed value of property of parent element, input
isn't parent of input:focus
. if put input
in div
, , specify border-color div
, inherit
mean color of input's border 1 of div
's border .
exemple: https://jsfiddle.net/e4mzfo3v/1/
Comments
Post a Comment