Given the following html
<label for="inputelement">label</label> <input type="text" id="inputelement" name="inputelement" />
You can style the input on focus using
input:focus { background: green; }
Is there a way of also styling the <label />
without JavaScript?
Thanks all
If you only want to style a specific input type, you can use attribute selectors: input[type=text] - will only select text fields. input[type=password] - will only select password fields. input[type=number] - will only select number fields.
You can use the CSS 'starts with' attribute selector ( ^= ) to select all labels with a for attribute that starts with 'red', 'green', etc. Show activity on this post. Show activity on this post. For one, you don't have to repeat the color and font-weight styles from the first input[type="checkbox"]:checked + label .
No. there is unfortunately no predecessor selector in css
input:focus -+ label { ... }
would be lovely.
having the label after the input would be dooable:
input:focus + label { ... }
you could use some positioning to display before...
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