Highlight label on input focus not working

Question

I have this in my HTML:

<label class="control-label" for="firstName">{{ 'OA_FIRST_NAME' | translate | uppercase }}<sup>*</sup></label>
<input
    formControlName="firstName"
    class="signup-input full-width" 
    type="text"
    name="firstName" 
    required>

And this in my SCSS:

input[name=firstName]:focus {

    background-color: blue !important;

    label[for=firstName] {
        background-color: red !important;
        color: green !important;
    }
}

the blue background for the input works but the label doesn't change at all. Am I doing this wrong?

score 2 · Accepted Answer · answered Jan 26 '17 at 19:22

2

You need to put the label next to the input box and use + or ~ selector, i.e.

input:focus + label {
  color: red;
}

<input type="text">
<label>Label</label>

For visually reordering the input and label positions, see the simple demo with flexbox.

.fieldset {
  display: inline-flex;
  flex-direction: row-reverse;
}
.fieldset label {
  margin-right: 4px;
}
.fieldset input:focus + label {
  color: red;
}

<div class="fieldset">
  <input type="text">
  <label>Label</label>
</div>

answered Jan 26 '17 at 19:22

Stickers

75,527
23
147
186

so is there no way of having this work with the label before the input? – georgej Jan 26 '17 at 19:34
@georgej You will need js for that I believe. – Stickers Jan 26 '17 at 19:36

Highlight label on input focus not working

1 Answers1