Как выбрать переключатель в css?

Как выбрать переключатель в CSS? HTML, с которым я работаю, генерируется, поэтому я не могу добавить к нему класс или другие атрибуты.

Я нашел вход [type = "radio" ] в Интернете, но я не знаю, является ли это обычным CSS и поддерживается большинством браузеров.

Есть ли другие способы выбора переключателя?

Спасибо,

Бретт

Ответы

Ответ 1

input[type="radio"] является примером селектора атрибутов. Это часть спецификации CSS3 и совершенно законна. Единственный браузер, который их не поддерживает, - IE6. Если поддержка IE6 важна для проекта, то вы должны изучить добавление классов к соответствующим переключателям.

Здесь статья с примером того, как эффективно использовать селектор атрибутов. Ознакомьтесь с этой статьей для получения дополнительной информации о плюсах CSS3.

Ответ 2

Селектор атрибутов (input [type = "radio" ]) является правильным решением, которое широко поддерживается всем, кроме IE6:)

Если у вас нет возможности модифицировать HTML для поддержки поддержки имен классов (или для доступа к javascript для этого), то ваши варианты:

А). чтобы убедиться, что ваш сайт не зависит от этого, и позволить IE6 грамотно деградировать.

В). жить без него

Ответ 3

вы можете использовать jQuery, чтобы выбрать вход и добавить класс динамически.

Пример (источник: http://docs.jquery.com/Attributes/addClass#class):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p:last").addClass("selected highlight");
  });
  </script>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
</body>
</html>

[изменить]

альтернативой jQuery является использование http://code.google.com/p/ie7-js/

он исправляет множество проблем с версиями ниже 7 исправление, которое вас больше всего интересует, иллюстрируется здесь:

http://ie7-js.googlecode.com/svn/test/attr-value.html

Ответ 4

Тот, о котором вы упомянули выше, является правильным способом настроить его с помощью CSS. Он назывался селектор атрибутов. Однако он не поддерживается IE6 и ниже. Их можно моделировать, добавив условное поведение script для IE6. (Просто выполните поиск в google, файл заканчивается обычно .htc).

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

Ответ 5

Ваше решение является правильным и будет работать во всех современных браузерах, кроме IE6. Для IE6 вам придется либо найти способ их выбора, изменить HTML или использовать Javascript.

Ответ 6

Вы можете использовать jQuery, чтобы найти все переключатели на странице, а затем добавить к нему некоторые классы CSS.