How do you select a radio button in css?

前端未结

关注

 3  1637

How do you select a radio button in CSS? The HTML I am working with is generated so I cannot add class or other attributes to it.

I found input[type=\"radio\"] on the

相关标签:

3条回答

终归单人心

2021-02-11 13:51

you could use jQuery to select the input and add a class dynamically.

Example (source: 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>

[Edit]

an alternative to jQuery is to use http://code.google.com/p/ie7-js/

it fixes loads of issues with ie versions lower than 7 the fix that will interest you most is illustrated here:

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

0 讨论(0)

广开言路

2021-02-11 14:02

The attribute selector (input[type="radio"]) is the correct solution, widely supported by everything but IE6 :)

If you have no ability to modify the HTML to inject classname support (or access to javascript to accomplish this) then your options are:

A). to make sure your site doesn't depend on this, and allow IE6 to degrade gracefully.

B). live without it

0 讨论(0)
发布评论:

提交评论
- 加载中...
北海茫月

2021-02-11 14:05

input[type="radio"] is an example of an attribute selector. It's part of the CSS3 spec and is perfectly legal. The only browser that doesn't support them is IE6. If supporting IE6 is important to the project, then you should look into adding classes to the radio buttons in question.

Here's an article with an example of how to effectively use attribute selectors. Check out this article for more info on CSS3 goodies.

0 讨论(0)
发布评论:

提交评论
- 加载中...