Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you style an active form input's label with just CSS

Tags:

html

css

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

like image 834
Dave Taylor Avatar asked Dec 08 '10 13:12

Dave Taylor


People also ask

How do I target a form element in CSS?

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.

How do you change the style of a label in HTML?

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 .


1 Answers

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...

like image 173
Ian Wood Avatar answered Sep 30 '22 04:09

Ian Wood