CSS-селектор для <input type = "?" - PullRequest
Новая
       27

CSS-селектор для <input type = "?"

105 голосов
/ 22 января 2009

Есть ли способ с помощью CSS нацелить все входные данные в зависимости от их типа? У меня есть отключенный класс, который я использую для различных отключенных элементов формы, и я устанавливаю цвет фона для текстовых полей, но я не хочу, чтобы мои флажки получали этот цвет.

Я знаю, что могу сделать это с отдельными классами, но я бы предпочел использовать CSS, если это возможно. Я уверен, я могу установить это в javascript, но снова ищу CSS.

Я нацеливаюсь на IE7 +. Так что я не думаю, что смогу использовать CSS3.

Редактировать

С помощью CSS3 я смогу сделать что-то вроде?

INPUT[type='text']:disabled было бы еще лучше избавиться от моего класса в целом ...

Редактировать

Хорошо, спасибо за помощь! Итак, вот селектор, который изменяет все текстовые поля и области, которые были отключены, не требуя установки каких-либо классов, когда я начинал этот вопрос, я никогда не думал, что это возможно ... 

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Это работает в IE7

Ответы [ 4 ]

154 голосов
/ 23 января 2009

Да. IE7 + поддерживает селекторы атрибутов: 

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Элемент input с типом атрибута, который содержит значение, которое равно, начинается с, содержит или заканчивается определенным значением.

Другие безопасные (IE7 +) селекторы:

  • Родитель> ребенок, имеющий: p > span { font-weight: bold; }
  • Предшественник ~, который является: span ~ span { color: blue; }

Что за <p><span/><span/></p> даст вам: 

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Дальнейшее чтение: Совместимость браузера с веб-сайтом quirksmode.com

Я удивлен, что все остальные думают, что это невозможно. Селекторы CSS-атрибутов уже здесь. Я думаю, пришло время очистить наши файлы .css.

3 голосов
/ 22 января 2009

К сожалению, другие постеры верны, что вы ... на самом деле, как исправлено в kRON, вы в порядке с вашим IE7 и строгим документом, но большинство из нас с требованиями IE6 сводятся к JS или ссылкам класса для этого, - это свойство CSS2, только одно без достаточной поддержки браузерами IE ^ h ^ h.

Из-за полноты селектор типа - подобно xpath - имеет вид [attribute=value], но существует много интересных вариантов. будет достаточно мощным, когда станет доступным, хорошо бы помнить IE8.

1 голос
/ 22 января 2009

Вы можете сделать это с помощью jQuery. Используя их селекторы, вы можете выбирать по атрибутам, таким как тип. Однако для этого требуется, чтобы у ваших пользователей был включен Javascript и загружался дополнительный файл, но если он работает ...

0 голосов
/ 22 января 2009

Извините, короткий ответ - нет. CSS (2.1) будет размечать только элементы DOM, а не их атрибуты. Вы должны будете применить определенный класс к каждому входу.

Облом я знаю, потому что это было бы невероятно полезно.

Я знаю, что вы сказали, что предпочитаете CSS, а не JavaScript, но вам все равно стоит подумать об использовании jQuery. Он обеспечивает очень чистый и элегантный способ добавления стилей к элементам DOM на основе атрибутов.

...