css - 在 SCSS 中更改输入焦点上的标签颜色

Question

鉴于此代码，无论我使用什么 - focus、:checked、hover 等，我都无法更改标签的颜色。

我已经在 stackoverflow 上阅读了多个线程，但不知何故我似乎无法处理这个问题。

我知道为了使用+选择器，标签必须在输入之后。

如果我把标签放在输入后，对 SEO 不利吗？

纯 CSS(SCSS) 是否可行，还是我需要 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>

Answer 1

在输入后有一个标签对 SEO 来说不是坏事。 for 属性将这两个元素关联起来。机器人会尊重这一点。

您可以将标签放在输入后，然后使用flex 和order 以可视化方式重新排列它们。

你的 SCSS 看起来像

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

这是渲染结果

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