Есть ли способ применить CSS ко всем текстовым вводам HTML5, независимо от атрибута типа?

Question

Учитывая, что эти входные данные HTML различаются types:

<input type="text" id="username" />
<input type="email" id="emailaddress" />
<input type="date" id="birthday" />
<input type="password" id="pword" />
<input type="search" id="q" />

Возможно ли применить стили CSS ко всем текстовым полям без необходимости добавлять класс к каждому или выбиратьони вот так:

input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="search"]
...

Также я не хочу использовать input { }, так как это выберет радиокнопки и т. д., когда я хочу стилизовать только текстовые поля.

Answer 1

Либо

input {...}
input[type="radio"] { (undo changes here) }

или

input:not([type="radio"]) {...}

Хотя последний вариант может показаться более простым, обратите внимание, что не все браузеры поддерживают синтаксис not.

Answer 2

Я не думаю, что это возможно.Например, браузер должен решить, как будет отображаться вход.Нет способа спросить, как браузер предоставил элемент управления (насколько я знаю).Например, некоторые браузеры отображают ввод «диапазона» как текстовое поле, а не как слайдер.Кроме того, некоторые браузеры отображают элемент управления «поиск» иначе, чем другие текстовые поля (закругленные углы и т. Д.), Поэтому ваш CSS может работать не так, как вы ожидаете.

Я думаю, вам придется использовать для ввода [тип= "text"], input = [type = "password"] {} правила, как вы описали.