it-swarm.com.ru

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

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

342
Yarin
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.

630
Alin Purcaru

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

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

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

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

37
Yi Jiang

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

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

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

14
garrettwinder

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

Работает Fiddle

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

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

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

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

[type=text] {}

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

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

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

0
Volker E.

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

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

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

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

0
Navneet Kumar