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

command line - Use qwinsta in PowerShell ISE -

java - Incorrect order of records in M-M relationship in hibernate -

Python website log in: BIG-IP can not find session information in the request -