CSS "inherit" не работает как ожидалось с состоянием фокусировки

По-видимому мне нужно некоторое образование о том, как значение inherit работает в CSS. Я пытаюсь использовать его с элементом, использующим селектор :focus, чтобы убедиться, что в фокусе цвет рамки не изменяется. Я делаю это, потому что я хочу переопределить поведение по умолчанию Bootstrap, которое создает синее "свечение" вокруг сфокусированных элементов ввода в формах.

Но как ни странно, когда я устанавливаю border-color:inherit под input:focus, граница только черным фокусом. Здесь jsfiddle демонстрирует это. Первый input имеет явный цвет в focus и работает отлично. Второй input использует inherit, который просто фокусируется на черном.

Ответ 1

Он работает как ожидалось, вы не понимаете, что на самом деле имеет ключевое слово inherit.

Он принимает вычисленное значение свойства элемента parent, input не является родительским элементом input:focus. Если вы поместите свой input в div и укажите цвет границы для этого div, тогда inherit будет означать, что цвет входной границы будет одним из границ div.

Пример: https://jsfiddle.net/e4mzfo3v/1/

Ответ 2

Inherit будет извлекать вычисленное значение из непосредственного родителя (и этот родитель получит только унаследованное значение, если он явно определен). Ничего не найдено, поэтому по умолчанию он черный. Если вы установите родительское значение на красный, оно будет работать.

Пример отсутствия контура - #input2:focus { outline: 0; }

Ответ 3

Значение inherit указывает элементу использовать значение из родительского элемента. В ваших источниках нет родителей, поэтому ничего не ссылается на...

Вместо этого установите свойство с флагом !important, чтобы он не переопределялся:

Обновлен JsFiddle

#input2 {
    border-color:red !important;
    border-width:10px;
}