在输入焦点上改变标签的颜色.怎么样？

Question

输入时focus我想改变标签元素的颜色.我怎样才能更少地实现这一目标？

.control-label{
      color: @gray-light;
}
.controls{
  input,
  textarea{
    background-color:red; 
    &:focus{
      .control-label &{
        color: red;  //HERE
      }

    }
}

HTML:

<div class="control-group">
    <label class="control-label" for="inputEmail">Firstname</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Firstname">
    </div>
</div>

Answer 1

我不认为你可以不改变你的HTML,另见:有没有办法将鼠标悬停在一个元素上并影响不同的元素？,你的元素应该是直接的兄弟姐妹.(LESS在这里没有帮助解决你的问题,LESS生成CSS而且似乎无法用CSS做)

可能的建议:

input:focus + .control-label
{
    background-color:purple;
    color: red;
}
.controls > input
{
    float:right;
}	

<div class="controls">
    <input type="text" id="inputEmail" placeholder="Firstname">
    <label class="control-label" for="inputEmail">Firstname</label>
</div>

或使用javascript解决您的问题:https://stackoverflow.com/a/20226218/1596547

Answer 2

使用弹性盒

CSS 是级联的，即受元素在 DOM 中出现的顺序的影响。为了能够仅在输入焦点 ( input:focus + label)时选择标签，label需要在 之后input，所以；

将 放在DOMinput之前label，然后使用 flexbox 反转它们在页面上的显示顺序。

.input-group {
    display: flex;
    flex-direction: column-reverse;
}

input:focus + label {
    color: green;
}

<div class="input-group">
    <input value="Input" />
    <label>Label</label>
</div>

Answer 3

一种解决方案是将DOM 移至DOM 的label下方，input但将它们绝对定位（移至父级），以使label外观位于input字段上方：

<div>
  <input type="text"/>
  <label>Text</label>
</div>

在CSS中，将移至label顶部，将input移至底部：

label {
  position: absolute
  top: 0
}

input {
  position: absolute
  bottom: 0
}

并使用:focus状态更改样式label：

input:focus + label {
    color: red
}

参见示例：

http://codepen.io/robcampo/pen/zGKLgg

聚焦时，label变成红色。不需要JS。

Answer 4

一种解决方案是使用:focus-within选择器。

因此，您将执行以下操作。假设您始终在a中有一些描述的输入control-group，则只要关注输入，它将为标签设置样式。

control-group {
    &:focus-within {
        control-label {
            color: red; 
        }
    }
}

可以在这里找到更多信息：https : //developer.mozilla.org/en-US/docs/Web/CSS/ : focus-within