CSS селектор для полей ввода текста? - PullRequest
Новая
       32

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

346 голосов
/ 06 ноября 2010

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

Ответы [ 9 ]

636 голосов
/ 06 ноября 2010 
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.

37 голосов
/ 06 ноября 2010

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

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

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

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

14 голосов
/ 06 ноября 2010

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

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

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

6 голосов
/ 09 сентября 2014

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

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

$(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;
}
2 голосов
/ 24 мая 2016

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

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}
0 голосов
/ 17 октября 2018

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

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

0 голосов
/ 11 апреля 2018

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

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

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

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

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

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

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

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

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

0 голосов
/ 19 декабря 2016

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

input[type=text] {
background:gold;
font-size:15px;
 }
0 голосов
/ 06 апреля 2016

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

[type=text] {}

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

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

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

...