it-swarm.com.ru

css селектор для соответствия элементу без атрибута x

Я работаю над файлом CSS и нахожу необходимость стилизовать поля ввода текста, однако у меня возникают проблемы. Мне нужно простое объявление, которое соответствует всем этим элементам:

<input />
<input type='text' />
<input type='password' />

... но не соответствует этим:

<input type='submit' />
<input type='button' />
<input type='image' />
<input type='file' />
<input type='checkbox' />
<input type='radio' />
<input type='reset' />

Вот что я хотел бы сделать:

input[!type], input[type='text'], input[type='password'] {
   /* styles here */
}

В приведенном выше CSS обратите внимание на первый селектор input[!type]. Под этим я подразумеваю, что я хочу выбрать все поля ввода, в которых атрибут type не указан (поскольку по умолчанию используется текст, но input[type='text'] не совпадает с ним). К сожалению, в спецификации CSS3 нет такого селектора, который я мог бы найти.

Кто-нибудь знает способ сделать это?

288
spudly

: не селектор

input:not([type]), input[type='text'], input[type='password'] {
   /* style here */
}

Поддержка: в Internet Explorer 9 и выше

455
eveliotc

Для более кросс-браузерного решения вы можете ввести все так, как вы хотите, чтобы не набирали текст, текст и пароль, а другой стиль переопределяет этот стиль для радио, флажков и т.д.

input { border:solid 1px red; }

input[type=radio], 
input[type=checkbox], 
input[type=submit], 
input[type=reset], 
input[type=file] 
      { border:none; }

- Или же -

может ли какая-то часть вашего кода, которая генерирует нетипизированные входные данные, дать им класс, подобный .no-type, или просто вообще не выводить? Кроме того, этот тип выбора может быть сделан с помощью jQuery.

30
Tim Santeford

Просто хочу добавить к этому, вы можете иметь селектор: not в oldIE, используя selectivizr: http://selectivizr.com/

10
smets.kevin