input [type = 'text'] CSS-селектор не применяется к текстовым вводам по умолчанию?

Question

Тип ввода по умолчанию - «текст». Тогда я всегда предполагал, что объявления CSS, нацеленные на input[type='text'], будут влиять на эти входные данные, даже если тип не был явно объявлен в элементе управления. Однако я только заметил, что мои текстовые вводы по умолчанию не получают стили. Почему это так? И как мне это решить?

input[type='text'] {
  background: red;
}

<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */

Answer 1

CSS использует только данные в дереве DOM, что имеет мало общего с тем, как средство визуализации решает, что делать с элементами с отсутствующими атрибутами.

Так что либо пусть CSS отражает HTML

input:not([type]), input[type="text"]
{
background:red;
}

или сделайте HTML явным.

<input name='t1' type='text'/> /* Is Not Red */

Если бы этого не произошло, вы бы никогда не смогли различить

element { ...properties... }

и

element[attr] { ...properties... }

потому что все атрибуты всегда будут определены для всех элементов. (Например, table всегда имеет атрибут border, с 0 по умолчанию.)

Answer 2

По спецификациям CSS браузеры могут использовать или не использовать информацию об атрибутах по умолчанию; в основном нет. Соответствующее предложение в спецификации CSS 2.1: 5.8.2 Значения атрибутов по умолчанию в DTD . В селекторах CSS 3 это пункт 6.3.4 с тем же именем. Он рекомендует: «Селекторы должны быть спроектированы таким образом, чтобы они работали независимо от того, включены ли значения по умолчанию в дерево документов».

Как правило, лучше явно указывать необходимые атрибуты, такие как type=text, а не использовать их по умолчанию. Причина в том, что не существует простого надежного способа ссылки на элементы input с атрибутом по умолчанию type.

Answer 3

Потому что это не должно делать это.

input[type=text] { } является селектором атрибута и будет выбирать только те элементы с соответствующим атрибутом.

Answer 4

Чтобы быть совместимым со всеми браузерами, вы всегда должны объявлять тип ввода.

Некоторые браузеры принимают тип по умолчанию как «текст», но это не очень хорошая практика.

Answer 5

попробуйте

 input[type='text']
 {
   background:red !important;
 }