Селектор CSS для <input type = "?"
Есть ли способ с помощью CSS настроить все входные данные в зависимости от их типа? У меня есть отключенный класс, который я использую для различных отключенных элементов формы, и я устанавливаю цвет фона для текстовых полей, но я не хочу, чтобы мои флажки получали этот цвет.
Я знаю, что могу сделать это с отдельными классами, но я бы предпочел использовать CSS, если это возможно. Я уверен, я могу установить это в javascript, но снова ищу CSS.
Я нацелен на IE7 +. Поэтому я не думаю, что могу использовать CSS3.
Редактировать
С CSS3 я мог бы сделать что-то вроде?
INPUT[type='text']:disabled, что бы даже лучше вообще избавиться от моего класса ...
Редактировать
Хорошо, спасибо за помощь! Итак, вот селектор, который изменяет все текстовые поля и области, которые были отключены, не требуя установки каких-либо классов, когда я начал этот вопрос, я никогда не думал, что это возможно ...
INPUT[disabled][type='text'], TEXTAREA[disabled]
{
background-color: Silver;
}
Это работает в IE7
Ответы 4
К сожалению, краткий ответ - нет. CSS (2.1) будет размечать только элементы DOM, но не их атрибуты. Вам нужно будет применить определенный класс к каждому входу.
Облом, я знаю, потому что это было бы невероятно полезно.
Я знаю, что вы сказали, что предпочитаете CSS, а не JavaScript, но вам все же следует рассмотреть возможность использования jQuery. Он обеспечивает очень чистый и элегантный способ добавления стилей к элементам DOM на основе атрибутов.
jquery - способ сделать это, или просто JavaScript в целом
Afaict, это неверный ответ (часть CSS 2.1): w3.org/TR/CSS21/selector.html#attribute-selectors. Если нет, то просьба уточнить свой ответ.
Извините - вы совершенно правы. Я просто ожидаю наименьшего от IE7, потому что очень часто разработчикам все еще требуется одновременно поддерживать IE6. Надо было прочитать вопрос более внимательно и сделать уроки.
Вы можете сделать это с помощью jQuery. Используя их селекторы, вы можете выбирать по атрибутам, например по типу. Однако для этого требуется, чтобы у ваших пользователей был включен Javascript и загружался дополнительный файл, но если он работает ...
К сожалению, другие плакаты верны, что вы
... на самом деле, как исправлено kRON, ты в порядке с вашим IE7 и строгим документом, но большинство из нас с требованиями IE6 для этого сокращены до JS или ссылок на классы, но это является свойство CSS2, только одно без достаточной поддержки со стороны IE ^ h ^ h браузеры.
Для полноты картины селектор типа - аналогично xpath - имеет форму [attribute=value], но существует много интересных вариантов. будут будет довольно мощным, когда он доступен, хорошо держать в голове для IE8.
У вас есть более обновленная ссылка на поддержку браузера? Это основано на бета-версии IE7, хотелось бы увидеть IE8
IE8 все еще находится в стадии бета-тестирования, но quirksmode говорит "да": quirksmode.org/css/contents.html
Я все еще поддерживаю IE6, но это не добавленная крошечная визуальная настройка.
честно говоря, я ошибался, отвечая на основе заголовка, я обычно отвечаю на общие случаи - мне действительно стоит прочитать вопросы больше :)
Да. IE7 + поддерживает селекторы атрибутов:
input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]
Вход элемента с типом атрибута, который содержит значение, равное, начинается с, содержит или заканчивается определенным значением.
Другие безопасные (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>
Дальнейшее чтение: Совместимость браузера с CSS на сайте quirksmode.com
Я удивлен, что все думают, что это невозможно. Селекторы атрибутов CSS здесь уже некоторое время. Думаю, пора очистить наши файлы .css.
Хорошо, я пробовал это, но теперь это не сработало, поэтому у меня, должно быть, испортился синтаксис.
Вы просто сделали мой день! Теперь, если вы хотите, чтобы моя неделя говорила мне, что это можно сделать в IE6 без использования выражений, хе-хе :-) j / k там
К сожалению, не может. Я перестал поддерживать IE6, исходя из религиозных взглядов, и предлагаю всем нам тоже. Сегодня я использую условный комментарий IE, чтобы сообщить пользователям, что их компьютер и конфиденциальность находятся под угрозой из-за использования IE6 и что им следует немедленно выполнить обновление: P
Честно говоря, для этого требуется строгий тип документа (не проблема) и он не работает для IE6 (признаю, что пропустил спецификацию IE7 в OP)
Думаю, я так привык к поддержке IE6, что просто предположил, что в IE7 это тоже не сработает.
Хотел бы я прекратить поддерживать IE6, но я не могу и не могу сделать то, что вы предложили ... Но мне действительно очень хотелось бы ;-)
Я написал статья с некоторой подробной информацией о селекторах атрибутов CSS.