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

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

input[type=text]

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

form input[type=text]

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

#myForm input[type=text]

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

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

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

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'

Тем не менее, это оставляет случай, когда тип определен, но имеет недопустимое значение, и все равно возвращается к type = "text". Чтобы покрыть это, мы могли бы использовать выбор всех входов, которые не относятся к другим известным

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

Но этот селектор был бы довольно нелепым, а также список возможных типов растет с добавлением новых функций в HTML.

Обратите внимание: :notпсевдокласс поддерживается только начиная с IE9.

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

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

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

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

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

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

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

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

Рабочая скрипка

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

:textявляется расширением jQuery и не является частью спецификации CSS, запросы с использованием: text не могут воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным методом 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;
}

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

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

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

[type=text] {}

Никто не упомянул более низкую CSS специфичностью ( почему это что важно ?) До сих пор, [type=text] особенности 0,0,1,0 вместо 0,0,1,1 с input[type=text].

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

нормализованный v4.0.0 только что выпущен с пониженной специфичностью селектора .

С помощью селектора атрибутов мы нацеливаем тип ввода текста в CSS

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

входной [тип = текст]

Это выберет весь тип ввода текста на веб-странице.

Селекторы атрибутов часто используются для ввода. Это список селекторов атрибутов:

[title] Все элементы с атрибутом title выделены.

[title = banana] Все элементы, которые имеют значение «banana» атрибута title.

[title ~ = banana] Все элементы, которые содержат значение «banana» в значении атрибута title.

[title | = banana] Все элементы, значение атрибута title которых начинается с 'banana'.

[title ^ = banana] Все элементы, значение атрибута title которых начинается с 'banana'.

[title $ = banana] Все элементы, значение атрибута title которых заканчивается на 'banana'.

[title * = banana] Все элементы, значение атрибута title которых содержит подстроку "banana".

Ссылка: https://kolosek.com/css-selectors/