Menu
Is there a way to exclude or select Label by input types, something similar to input field?
label:not([type=checkbox])
label[type=checkbox]
493
To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id .
var element = document. querySelector("label[for=email]"); ...or in JavaScript using jQuery: var element = $("label[for=email]");
Use the textContent property to get the text of a label element, e.g. const text = label. textContent . The textContent property will return the text content of the label and its descendants. If the element is empty, an empty string is returned.
Using float and overflow attributes: Make a label and style it with float attribute. Now set the label float(position) left or right according to your requirement. This will align your label accordingly. Overflow property for input is used here to clip the overflow part and show the rest.
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.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
