Как выбрать радио-кнопку в CSS? - PullRequest
Новая
       11

Как выбрать радио-кнопку в CSS?

38 голосов
/ 16 июня 2009

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

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

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

Спасибо,

Brett

Ответы [ 6 ]

64 голосов
/ 16 июня 2009

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

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

9 голосов
/ 16 июня 2009

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

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

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

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

4 голосов
/ 16 июня 2009

вы можете использовать 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 / тест / атр-value.html

1 голос
/ 16 июня 2009

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

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

0 голосов
/ 16 июня 2009

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

0 голосов
/ 16 июня 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...