2

Apparently I need some education on how the inherit value works in CSS. I'm trying to use it with an element using the :focus selector to make sure that, on focus, the border color doesn't change. I'm doing this because I want to override Bootstrap's default behavior which creates a blue "glow" around focused input elements on forms.

But oddly, when I set border-color:inherit under input:focus, the border just goes black on focus. Here's a jsfiddle demonstrating this. The first input has an explicit color under focus and that works fine. The Second input uses inherit just goes to black on focus.

J-bob
  • 8,380
  • 11
  • 52
  • 85

3 Answers3

2

It's working as expected, you're missunderstanding what the inherit keyword actually does.

It takes the computed value of the property of the parent element, input isn't the parent of input:focus. If you were to put your input in a div, and specify a border-color for that div, then the inherit would mean the color of the input's border would be the one of the div's border .

Exemple: https://jsfiddle.net/e4mzfo3v/1/

Drown
  • 5,852
  • 1
  • 30
  • 49
  • While the other answers are also helpful, I picked yours because it explains the exact conceptual issue that I had. It thought a `focus` element was treated like a child of the original element. Thanks! – J-bob Apr 30 '15 at 11:48
2

Inherit will retrieve the computed value from the immediate parent (and that parent will only receive an inherited value if it's explicitly defined). None is found, so it defaults to black. If you set a parent value to red, it will work..

Example of No Outline - #input2:focus { outline: 0; }

jhansen
  • 284
  • 2
  • 10
  • ok, I thought `:focus` was treated like a child of the element. Is there a CSS setting to just "keep value from unfocused state"? – J-bob Apr 29 '15 at 17:41
  • If you are looking to keep the red border red; just don't include the focus in your CSS. If you don't want the blue outline that exists on the outside of the box, you would do `outline: 0;` as part of your :focus definition. – jhansen Apr 29 '15 at 22:06
  • Inherit does not climb parent to parent to parent. It only takes the computed value of the property from the parent. – Oriol Apr 29 '15 at 22:43
  • @jhansen, I understand that I could just remove the focus attribute, but the jsfiddle I provide is just a trivial example. I as I said in my question, I'm trying to override Bootstrap's `focus` behavior for a form element, hence the "keep property the same" idea for focus. But I'm getting the sense that's just not possible? – J-bob Apr 30 '15 at 11:46
  • Could you show a more specific example? Based on my current understanding, im thinking you would either create a "single tier" more specific definition, or create the same definition and load your css after bootstraps – jhansen Apr 30 '15 at 13:12
-2

The inherit value tells the element to use the value from the parent element. Your inputs don't have parents, therefore, nothing to reference to...

Instead, set the property with the !important flag to keep it from being overridden:

Updated JsFiddle

#input2 {
    border-color:red !important;
    border-width:10px;
}
LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • Using `!important` should be avoided as much as possible. Simply using `#input2, #input2:focus { border-color: red; }` would do the trick – Stephan Muller Apr 29 '15 at 16:55
  • @StephanMuller - I don't know if you are the downvoter, but I disagree... When used wisely, `!important` may be useful. Saying it *should not* is not quite an argument. – LcSalazar Apr 29 '15 at 16:57
  • A self written post with no external sources is not really an argument. – LcSalazar Apr 29 '15 at 16:59
  • @StephanMuller - But that's ok... I'm sure that the other 111 (so far) voters may have had a good reason to agree with you... – LcSalazar Apr 29 '15 at 17:01
  • You have a point though. That answer still gets activity, I should add some external sources just to be more complete. – Stephan Muller Apr 29 '15 at 17:02