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

Ответ 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

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

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])...

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

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

Ответ 2

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

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

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

Подробнее см. http://reference.sitepoint.com/css/attributeselector

Ответ 3

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

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

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

Ответ 4

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

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

$(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;
}

Ответ 5

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

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

Ответ 6

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

[type=text] {}

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

Эффективность не оказывает никакого негативного влияния на всех.

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

Ответ 7

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

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