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>

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

1 个答案: