I have this form :

<form data-required="reference" class="tag-field reference-field">
   <label for="reference-tag-input">
      Reference:
      <input type="hidden" id="reference-tag-input" class="reference-field-tagged form-control" data-removebtn="true" name="tag-2">
      <div class="tags-container"><input type="text" class="tag-input" placeholder=""></div>
   </label>
</form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And I want to colorize the lable of the form when input of the form is focused. So I used this with no luck:

.tag-field input.tag-input:focus label {
  color: red;
}

How can I change the lable color when form is focused?

CodePudding user response：

Use :focus-within selector:

@supports selector(:focus-within) {
  form:focus-within label { color: red; }
}

<form data-required="reference" class="tag-field reference-field">
   <label for="reference-tag-input">
      Reference:
      <input type="hidden" id="reference-tag-input" class="reference-field-tagged form-control" data-removebtn="true" name="tag-2">
      <div class="tags-container"><input type="text" class="tag-input" placeholder=""></div>
   </label>
</form>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Be aware that IE 11 does not support :focus-within, so this solution must be accompanied by Javascript if you need to support that dead browser.