Geek Answers Handbook

Select a label by input type

Is there a way to exclude or select Label by input type, something similar to an input field?

label:not([type=checkbox]) label[type=checkbox]
+7
source share
3 answers

If you select your checkbox with a specific identifier so that everything starts with the same thing, you could do the following:

HTML

 <input type="checkbox" id="chkTerms" /> <label for="chkTerms">Read terms & conditions</label>

CSS

 label[for*="chk"], label[htmlfor*="chk"] { css here }

Perhaps modern browsers only. EDIT: I just tried the fiddle: the link , and it works in chrome and IE 8 and 9, but not 7. I haven't tried it in FF.

EDIT2: To give an explanation of what is happening here, the square brackets look for the attribute that is required. Asterix changes the behavior of peers with just equal peers, which means it contains - wherever the attribute "contains" chk, it will apply this style. You can replace the * character with ^, and it will change it to a value meaning that they will start instead.

EDIT3: BoltClock provided a fix for IE7 in the comment, I updated the answer to include it.

+13
source

What about input[type=checkbox] + label { /*label style here*/ } ? It can work if the text is immediately after the input element. I have not tested this.

+3
source

You can use your flag with a basic directory of data attributes.

 <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" /> <label for="checkbox-0">Whatever</label>

If you do not expect this ... let us know ...

+1
source

More articles:


All Articles