CSS“继承”在焦点状态下没有按预期工作 [英] CSS "inherit" not working as expected with focus state

问题描述

显然，我需要一些关于继承值如何在CSS中工作的教育。我试图用一个使用：focus 选择器的元素来使用它，以确保在焦点上边界颜色不会改变。我这样做是因为我想重写Bootstrap的默认行为，它会在窗体上的焦点输入元素周围创建一个蓝色的发光。但奇怪的是，当我设置 border-color：inherit 在 input：focus 下，边框在焦点上变黑。 这里是一个演示这个的jsfiddle。第一个 input 在 focus 下有一个明确的颜色，并且工作正常。第二个输入使用继承只会在焦点上变黑。

解决方案

正如预期的那样，您错误地理解了继承关键字实际上的作用。

它取父元素的属性的计算值， input 不是<$ c的父元素$ C>输入：焦点。如果要将 input 放入 div 中，并为 div ，那么继承意味着输入边框的颜色将是 div 的边框。

示例： https ：//jsfiddle.net/e4mzfo3v/1/

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.

解决方案

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/

这篇关于CSS“继承”在焦点状态下没有按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！