Селектор CSS для полей ввода текста?

Question

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

Answer 1

input[type=text] 

или ограничить текстовые входы внутри формы

form input[type=text] 

или еще больше ограничить в определенной форме, предполагая, что он имеет ID myForm

#myForm input[type=text] 

Примечание: Это не поддерживается IE6, поэтому, если вы хотите разработать для IE6, либо используйте IE7.js (как предложил Йи Цзян), либо начинайте добавлять классы ко всем текстовым вводам.

Ссылка: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

---

Поскольку it is specified, что по умолчанию значения атрибутов не всегда могут выбираться с селекторы атрибутов, можно было бы попытаться охватить другие случаи разметки, для которых текстовые входы визуализируются:

input:not([type]), // type attribute not present in markup 
input[type=""], // type attribute present, but empty 
input[type=text] // type is explicitly defined as 'text' 

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

input:not([type=button]):not([type=password]):not([type=submit])... 

Но этот селектор было бы довольно смешно, а также list of possible types растет с новыми функциями, которые добавлены в HTML.

Примечание: :not pseudo-class поддерживается только с IE9.

Answer 2

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

input[type="text"] { 
    font-family: Arial, sans-serif; 
} 

Это поддерживается в IE7 и выше. Вы можете использовать IE7.js, чтобы добавить поддержку для этого, если вам нужно поддерживать IE6.

См: http://reference.sitepoint.com/css/attributeselector для получения дополнительной информации

Answer 3

Я обычно использую селекторы в моих основной таблице стилей, а затем сделать файл IE6 конкретный .js (JQuery), который добавляет класс для всех типов входов. Пример:

$(document).ready(function(){ 
    $("input[type='text']").addClass('text'); 
)}; 

А затем просто продублируйте мои стили в специальной таблице стилей ie6, используя классы. Таким образом, фактическая разметка немного чище.

Answer 4

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

Working Fiddle

$(document).ready(function() { 
    $(":text").css({ //or $("input:text") 
     'background': 'green', 
     'color':'#fff' 
    }); 
}); 

:text является расширение JQuery и не является частью спецификации CSS, запросы с помощью: текст не может воспользоваться повышения производительности, обеспечиваемого встроенным методом запросов DOM querySelectorAll().Для лучшей производительности в современных браузерах вместо этого используйте [type="text"]. Это будет работать для IE6+.

$("[type=text]").css({ // or $("input[type=text]") 
    'background': 'green', 
    'color':'#fff' 
}); 

CSS

[type=text] // or input[type=text] 
{ 
    background: green; 
} 

Answer 5

Как писал @Amir выше, лучший способ в настоящее время - кросс-браузер и оставляя позади IE6 - это использовать

[type=text] {} 

Никто не упомянул нижний CSS специфичность (whyisthatimportant?) до сих пор, [type=text]features 0,0,1,0 вместо 0,0,1,1 с input[type=text].

Совершенно очевидно, что никакого негативного воздействия на него больше нет.

нормализовать v4.0.0 только что выпущен with lowered selector specificity.

Answer 6

У меня было текстовое поле ввода типа в поле строки таблицы. Я нацеливание его с кодом

.admin_table input[type=text]:focus 
{ 
    background-color: #FEE5AC; 
} 

Answer 7

С селекторами атрибутов мы ориентируемся ввод типа текста в CSS

input[type=text] { 
background:gold; 
font-size:15px; 
}