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

Question

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

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

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

Что я нахожу при поиске, чтобы сделать следующее в CSS:

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

input { 
    /* ... */ 
} 

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

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

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

Answer 3

Стиль входной, используя класс и CSS:

.redBG 
{ 
    background: red; 
} 

Тогда ваш HTML является:

<input class="redBG" /> 

Прикрепленный jsFiddle.

Answer 4

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

input { 
    background-color: red; 
} 

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

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

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