CODEWITHSUNDEEP
csssass
Tanasos
Tanasos

Reputation: 4098

Change label color on input focus in SCSS

Given this code, I can not change the color of my label, no matter what I use - focus, :checked, hover etc.

I have read multiple threads here on stackoverflow, but somehow I can't seem to cope with this issue.

I know that in order to use the + selector, the label must be after the input.

Is it bad for SEO if I put the label after the input..?

Is this possible with pure CSS(SCSS) or do I need jQuery?

.widg-input {
  .input {
    &:focus {
      outline: none;
      border: none;
      border-bottom: .1rem solid green;
    }
    &:checked {
      +.input-label {
        color: red;
      }
    }
  }
}
<section class="widg-input">
  <label for="input1" class="input-label">firstname</label>
  <input type="text" class="input" name="input1" placeholder="John">
</section>

Upvotes: 0

Views: 6062

Answers (1)

Michael Coker
Michael Coker

Reputation: 53684

Having a label after an input is not bad for SEO. The for attribute associates the two elements. Bots will respect that.

You can put the label after the input, then use flex and order to re-arrange them visually.

Your SCSS would look like

.widg-input {
  display: flex;
  .input-label {
    order: -1;
  }
  .input {
    &:focus {
      outline: none;
      border: none;
      border-bottom: .1rem solid green;
      + .input-label {
        color: red;
      }
    }
  }
}

And here's the rendered result

.widg-input {
  display: flex;
}
.widg-input .input-label {
  order: -1;
}
.widg-input .input:focus {
  outline: none;
  border: none;
  border-bottom: .1rem solid green;
}
.widg-input .input:focus + .input-label {
  color: red;
}
<section class="widg-input">
  <input type="text" class="input" name="input1" placeholder="John">
  <label for="input1" class="input-label">firstname</label>
</section>

Upvotes: 2

Related Questions