On input focus change color of label. How?
I don't think you can without changing your HTML, see also: Is there any way to hover over one element and affect a different element?, your elements should be direct siblings. (LESS don't help to solve your problem here, LESS generate CSS and it seems impossible to do in CSS)
Possible suggestion:
input:focus + .control-label
{
background-color:purple;
color: red;
}
.controls > input
{
float:right;
}
<div class="controls">
<input type="text" id="inputEmail" placeholder="Firstname">
<label class="control-label" for="inputEmail">Firstname</label>
</div>
Or solve your problem with javascript: https://stackoverflow.com/a/20226218/1596547
Use Flexbox
CSS is cascading, i.e. affected by the order that elements appear in the DOM. To be able to select the label only when the input is focused (input:focus + label
), the label
needs to come after the input
, so;
Put the input
before the label
in the DOM and then use flexbox to reverse the order that they appear on the page.
.input-group {
display: flex;
flex-direction: column-reverse;
}
input:focus + label {
color: green;
}
<div class="input-group">
<input value="Input" />
<label>Label</label>
</div>
One solution would be to use the :focus-within
selector.
So, you'd do something like the below. Assuming that you always have an input of some description inside of a control-group
, it will style the label whenever the input is focused on.
control-group {
&:focus-within {
control-label {
color: red;
}
}
}
More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
One solution would be to move the label
below the input
in the DOM but position them absolutely (to the parent) so the label
looks to be above the input
field:
<div>
<input type="text"/>
<label>Text</label>
</div>
In CSS move the label
to the top, the input
to the bottom:
label {
position: absolute
top: 0
}
input {
position: absolute
bottom: 0
}
And use the :focus
state to change the style of the label
:
input:focus + label {
color: red
}
See example:
http://codepen.io/robcampo/pen/zGKLgg
On focus, the label
turns red. No JS required.