Select Label by Input type

*爱你&永不变心* 提交于 2019-12-22 04:12:30

问题


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

label:not([type=checkbox])
label[type=checkbox] 

回答1:


If you give your checkboxes specific id's that all start 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
}

Probably modern browsers only though. EDIT: I have just tried a fiddle: link and it works in chrome and IE 8 & 9 but not 7. I did not try it in FF.

EDIT2: Just to give an explanation of what is going on here, the square brackets looks for an attribute called for. The the asterix changes the behaviour of the equals from just a plain equals, to mean contains - wherever the for attribute contains "chk" it will apply that style. You can replace the * with a ^ and it will change it to mean starts with instead of contains.

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




回答2:


How about input[type=checkbox] + label { /*label style here*/ } ? It might work if text is just after the input element. I have not tested that.




回答3:


You can use your checkbox with basic data-attribute reference..

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

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



来源:https://stackoverflow.com/questions/13031926/select-label-by-input-type

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!