CSS 随输入字段的 focus 属性变化

Question

每当输入聚焦时，我都会尝试影响标签。无论出于何种原因，只要输入聚焦，css 就不会被识别为标签。

li.sm-vol label {
    position: absolute;
    top: 33px;
    width: 100%;
    background: #462770;
    color: #fff;
    font-weight: 400 !important;
    padding-left: 10px;
    transition: all 0.2s ease;
}

li.sm-vol input:focus li.sm-vol label {
    top: 15px;
}

Answer 1

仅当标签位于输入字段旁边时，您才可以使用纯 CSS 来完成此操作，方法是使用 + 或 ~ 选择器，即

input:focus + label {
  color: red;
}

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

要直观地重新排序输入和标签位置，请参阅使用 flexbox 的简单演示。

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

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