Как настроить целевые поля ввода текста с помощью CSS?

Скажем, у вас есть следующий HTML:

<input />
<br />
<input type=text />

Конечно, в моем HTML у меня будут и другие типы полей ввода (флажки и т.д.). Теперь я хочу только стиль ввода текста.

То, что я нахожу при поиске, заключается в следующем:

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

Для второго ввода, где атрибут явно присутствует, это работает. Для первого, однако, он работает в IE8, но не в IE10. Также не в Chrome.

Итак, как я могу настроить таргетинг на все поля ввода текста и только на поле ввода текста, не имея при этом type=text везде?

Вы можете увидеть это в jsFiddle. Для IE8 ознакомьтесь с этими инструкциями о том, как заставить jsFiddle работать, но выглядит так:

Ответ 1

Если вы хотите опустить type="text" и по-прежнему иметь селекторное совпадение, вам придется использовать not psuedoselector, доступный в CSS3:

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

http://jsfiddle.net/dByqP/5/

Это не будет работать в более низких версиях IE, так как CSS3 не поддерживается в этих браузерах.

Лучшим решением было бы пройти и добавить type="text" в текстовые входы и просто использовать оригинальный селектор.

Ответ 2

Один болезненный, но верный способ - просто установить стиль

input {
    /* ... */
}

Что будет предназначаться для ввода текста в каждом браузере, тогда вы можете делать то, что делаете, и настраивать каждый отдельный вход, который не является текстовым вводом:

input[type=range] {}
input [type=phone] {}
// etc.

Таким образом, даже если оператор: not, доступный в CSS3, не поддерживается браузером, вы все равно можете заставить его работать...

Ответ 3

Мое предложение состояло в том, чтобы стиль по умолчанию для ввода был

input {
    background-color: red;
}

затем перезапишите стиль для чего-то еще, если необходимо, например, синяя кнопка

input[type='button'] {
    background-color: blue;
}

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

Ответ 4

Стиль ввода с использованием класса и CSS:

.redBG
{
    background: red;
}

Затем ваш HTML:

<input class="redBG" />

Прикреплено jsFiddle.