Скажем, у вас есть следующий HTML:
<input />
<br />
<input type=text />
Конечно, в моем HTML у меня будут и другие типы полей ввода (флажки и т.д.). Теперь я хочу только стиль ввода текста.
То, что я нахожу при поиске, заключается в следующем:
input[type=text] { background: red; }
Для второго ввода, где атрибут явно присутствует, это работает. Для первого, однако, он работает в IE8, но не в IE10. Также не в Chrome.
Итак, как я могу настроить таргетинг на все поля ввода текста и только на поле ввода текста, не имея при этом type=text везде?
Вы можете увидеть это в jsFiddle. Для IE8 ознакомьтесь с этими инструкциями о том, как заставить jsFiddle работать, но выглядит так:
Если вы хотите опустить type="text" и по-прежнему иметь селекторное совпадение, вам придется использовать not psuedoselector, доступный в CSS3:
input[type="text"], input:not([type]) {
...
}
Это не будет работать в более низких версиях IE, так как CSS3 не поддерживается в этих браузерах.
Лучшим решением было бы пройти и добавить type="text" в текстовые входы и просто использовать оригинальный селектор.
Один болезненный, но верный способ - просто установить стиль
input {
/* ... */
}
Что будет предназначаться для ввода текста в каждом браузере, тогда вы можете делать то, что делаете, и настраивать каждый отдельный вход, который не является текстовым вводом:
input[type=range] {}
input [type=phone] {}
// etc.
Таким образом, даже если оператор: not, доступный в CSS3, не поддерживается браузером, вы все равно можете заставить его работать...
Мое предложение состояло в том, чтобы стиль по умолчанию для ввода был
input {
background-color: red;
}
затем перезапишите стиль для чего-то еще, если необходимо, например, синяя кнопка
input[type='button'] {
background-color: blue;
}
конечно, вам нужно будет пойти и указать конкретные стили для определенных типов ввода, но это не значит, что вы не сделали бы это в любом случае, если бы вам нужна уникальная кнопка, например.
Стиль ввода с использованием класса и CSS:
.redBG
{
background: red;
}
Затем ваш HTML:
<input class="redBG" />
Прикреплено jsFiddle.