时间戳

首页 > 解决方案 > Highlight label when the field is focused

css - Highlight label when the field is focused

问题描述

So I have a data-list field below where I want to also change the label colour when the field is focused. What I've done below is I can't highlight the label when field is focused; it's the field only that is highlighted.

enter image description here

I have the css below:

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

How can I make the labels' color the same as the fields color when the field is focused?

标签： css

解决方案

如果您的标签在 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>

推荐阅读