css - 当字段获得焦点时突出显示标签

Question

所以我在下方有一个数据列表字段，我还想在该字段获得焦点时更改标签颜色。我在下面所做的是在聚焦字段时无法突出显示标签；只有突出显示的字段。

我有下面的 CSS:

<style lang="scss">
    .panel-con {
    color:rgba(0,0,0,0.54);
    }
    .group-list{
       input:focus { 
          border-color: #dbb100;
       }
    }
</style>

如何使标签的颜色与字段聚焦时的颜色相同？

Answer 1

如果您的标签在 DOM 中之前您的输入/选择，您不能仅使用 CSS 来完成。你需要JS。

如果您的标签在 DOM 中的输入/选择之后，您可以这样做。 (我创建了与您展示的类似的东西)

.wrapper {
  position: relative;
  padding-top: 30px;
}
.wrapper select {
  display: block;
}
.wrapper select:focus {
  color: red;
}
.wrapper select:focus + label {
  color: red;
}
.wrapper label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="wrapper">
<select name="example">
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
<label for="example">Test Label</label>
</div>