重点突出显示标签

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>

Answer 2

您需要

:focus-within

.wrapper:focus-within p {
  color: red;
}

<div class='wrapper'>
  <input class='input' type='text'/>
  <p>your text</p>
</div>