Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you select a radio button in css?

Tags:

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

like image 985
Brettski Avatar asked Jun 16 '09 16:06

Brettski


People also ask

How do I target a radio button checked CSS?

try the + symbol: It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first. ... and it will work for any structure, with or without divs etc as long as the label follows the radio input.

How can I select a single radio button?

Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.

How do I select a button type in CSS?

CSS [attribute^="value"] Selector The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the specified value. The following example selects all elements with a class attribute value that starts with "top": Note: The value does not have to be a whole word!


2 Answers

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.

like image 134
Evan Meagher Avatar answered Sep 27 '22 21:09

Evan Meagher


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
like image 42
annakata Avatar answered Sep 27 '22 21:09

annakata