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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -