CSS - Label selector for type?

Question

I am using this post explaining how to add a label selector for a given element. However, I would like to use it to select all the tags for this type (in particular, the type of radio). Attempt:

label[for=input[type="radio"]] { /* Styles */ } 

and

 label[for=[type="radio"]] { /* Styles */ } 

doesn't work, and I'm not sure what I'm doing wrong or how to do it right. Can someone explain the solution to me? Thank you very much!

Answer 1

Unfortunately, what you want cannot be done using existing CSS3 selectors.

It is planned that this function will be included in the CSS 4 level selector, but the specification for this is not yet complete and, of course, has not been implemented in any current browsers.

The idea is a selector that will look something like this:

 label /for/ [type="radio"] { /* styles */ } 

But this is for the future, not now. Unfortunately.

You can read about it here: http://css4-selectors.com/selector/css4/reference-combination/

At the same time, if you need this, you will need to make sure that you are structuring your HTML so that elements can reference each other using existing CSS selectors.

For example, if they are next to each other, you can use this:

 label + input[type="radio"] { .... } 

It is as close to you as possible.

Answer 2

Instead, you should use special classes for these labels. You cannot create a parent based on its child attributes in CSS [currently].

 <label class='radio'><input type='radio'></label> 

Your stylesheet will indicate

 label.radio{ /* add styles here */ } 

Answer 3

Correction First

The for attribute is bound only to the id of the form element with which it is associated , so you are abusing the attribute of what you want to do. The for design is to bind it to one specific element in the form. So something like this:

 <label for="RadioChk">My Radio Button</label><input id="RadioChk" type="radio" /> 

So, for not a solution just for checking type .

The second is the only CSS-only solution.

The only clean way to do this with pure CSS is to arrange your elements this way ( label after input ):

 <input type="radio" /><label>My Radio Button</label> 

What allows this css to choose :

 input[type=radio] + label { /* styles */ } 

If this cannot be done, I would go with the AbsoluteƵERØ solution using the class.

Answer 4

What you are trying to do is not possible (using CSS anyway). The syntax [attribute=value] works by checking the attribute value for this particular element. So for=[type="radio"]] looking for something like <label for='[type="radio"]'> (if the syntax is even valid).

Answer 5

Try the following:

 input[type=radio] { CSS goes here }