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>

CSS在输入字段

1 个答案: