Less 在输入焦点上更改标签的颜色。怎么用？

在输入

focus

时，我想更改label元素的颜色。我如何在更少的时间内实现这一点

.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>

名字

我认为，如果不更改HTML，您不能这样做，另请参见：，您的元素应该是直接的。（在这里，更少的代码无助于解决您的问题，更少的代码生成CSS，而且似乎不可能在CSS中完成）

可能的建议：

输入：焦点+.控件标签
{
背景颜色：紫色；
颜色：红色；
}
.控件>输入
{
浮动：对；
}

名字

一种解决方案是将

标签移动到DOM中
输入
的下方，但绝对定位它们（对父项），使
标签
看起来位于
输入
字段上方：

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

并使用
：focus
状态更改
标签的样式：

input:focus + label {
    color: red
}

见示例：


对焦时，
标签变为红色。不需要JS。
一种解决方案是在
选择器中使用
：焦点

所以，你可以做如下的事情。假设在
控制组
中始终有某个描述的输入，则每当关注输入时，它都会设置标签样式

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

更多信息可在此处找到：
使用Flexbox
CSS是级联的，即受元素在DOM中出现的顺序的影响。为了能够仅在输入聚焦时选择标签（
input:focus+label
），标签需要位于
input
之后，因此

将
输入
放在DOM中的
标签
之前，然后使用flexbox反转它们在页面上的显示顺序


。输入组{
显示器：flex；
弯曲方向：柱反向；
}
输入：焦点+标签{
颜色：绿色；
}

标签
简单的方法是使用：在

或

}

对这个人有很多心。什么都不起作用，离子标签也起作用。接受答案。堆栈溢出不允许评论（低于50）。所以分开写这应该是公认的答案。它在不影响元素顺序的情况下完成了这项工作。由于几乎完全（没有IE）浏览器支持，这非常棒。谢谢分享。节省了我很多的工作和重组！也比备选方案可读性更好-Thx！！
control-group {
    &:focus-within {
        control-label {
            color: red; 
        }
    }
}

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

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

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