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

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

CSS

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

HTML

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

http://jsfiddle.net/LhnNM/

Ответы

Ответ 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 - по умолчанию.)

Ответ 2

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

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

Ответ 3

Потому что это не предполагается.

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

Ответ 4

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

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

Ответ 5

попробуйте это

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