Селектор CSS для <input type = «?»


105

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

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

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

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

С CSS3 я мог бы сделать что-то вроде?

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

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

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

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

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


2
Я написал статью с подробной информацией о селекторах атрибутов CSS.
Сарфраз

Ответы:


155

Да. 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.


Хорошо, я пробовал это, но теперь это не сработало, поэтому у меня, должно быть, испортился синтаксис.
JoshBerke,

Вы только что сделали мой день! Теперь, если вы хотите, чтобы моя неделя говорила мне, что это можно сделать в IE6 без использования выражений, хе-хе :-) j / k there
JoshBerke

13
К сожалению, не может. Я перестал поддерживать IE6 из религиозных взглядов и предлагаю всем нам тоже. Сегодня я использую условный комментарий IE, чтобы сообщить пользователям, что их компьютер и конфиденциальность находятся под угрозой из-за использования IE6 и что им следует немедленно
выполнить

1
Думаю, я так привык поддерживать IE6, что просто предположил, что он не будет работать и в IE7
TJ L

4
Хотел бы я прекратить поддерживать IE6, но я не могу и не могу сделать то, что вы предложили ... Но мне действительно очень хотелось бы ;-)
JoshBerke

3

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

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


У вас есть более обновленная ссылка на поддержку браузера? Это основано на бета-версии IE7, хотелось бы увидеть IE8
JoshBerke

IE8 все еще находится в стадии бета-тестирования, но quirksmode говорит «да»: quirksmode.org/css/contents.html
annakata

Я все еще поддерживаю IE6, но это не добавленная крошечная визуальная настройка.
JoshBerke

честно говоря, это была моя ошибка - отвечать на основе заголовка, я обычно отвечаю на общие случаи - мне действительно стоит прочитать вопросы больше :)
annakata

1

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


0

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

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

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


jquery - это способ сделать это, или просто JavaScript в целом
TravisO,

4
Afaict, это неверный ответ (часть CSS 2.1): w3.org/TR/CSS21/selector.html#attribute-selectors . Если нет, то просьба уточнить свой ответ.
cic

1
Простите - вы совершенно правы. Я просто ожидаю наименьшего от IE7, потому что очень часто разработчикам все равно требуется поддерживать IE6 одновременно. Надо было прочитать вопрос более внимательно и сделать уроки.
Фил Уиллер,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.