CODEWITHSUNDEEP
css
Brettski
Brettski

Reputation: 20091

How do you select a radio button in css?

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 internet, but I don't know if this is regular CSS and supported by most browsers.

Is there any other ways to select a radio button?

Thank you,

Brett

Upvotes: 52

Views: 83553

Answers (6)

annakata
annakata

Reputation: 75814

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 class name support or access to javascript to accomplish this then your options are:

  1. to make sure your site doesn't depend on this and allow IE6 to degrade gracefully.
  2. live without it

Upvotes: 9

Evan Meagher
Evan Meagher

Reputation: 4555

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.

Upvotes: 93

Josh
Josh

Reputation: 6322

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

Upvotes: 5

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

The one you mention above is the correct way to target it by CSS. It's called an attribute selector. It is not supported by IE6 and below however. They can be simulated by adding a conditional behaviour script for IE6. (Just search on google, the file ending is usually .htc).

It should probably be noted that .htc-files usually result in horrendous performance and should only be used sparingly and be thoroughly tested to ensure that the performance hit is acceptable.

Upvotes: 1

Tom
Tom

Reputation: 34366

You could use jQuery to find all the radio buttons on the page, then add some CSS classes to it.

Upvotes: 0

edeverett
edeverett

Reputation: 8218

Your solution is the correct one and will work in all modern browsers apart from IE6. For IE6 you'll have to either find way of selecting them, modify the HTML or use Javascript.

Upvotes: 0

Related Questions