在输入焦点上更改标签的颜色。如何？答案

【问题标题】：On input focus change color of label. How?在输入焦点上更改标签的颜色。如何？
【发布时间】：2014-02-04 22:29:09
【问题描述】：

在输入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>

【问题讨论】：

标签： less

【解决方案1】：

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

}

对这个人充满热情。没有任何效果，这在 ion-label 中也有效。接受的答案。堆栈溢出不允许评论（低于 50 声望）。所以单独写

【讨论】：

【解决方案2】：

使用弹性盒

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

在 DOM 中将 input 放在 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>

【讨论】：

【解决方案3】：

简单的方法是使用 :focus-within check developer mozilla

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

或者

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

【讨论】：

【解决方案4】：

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

所以，你会做类似下面的事情。假设您总是在control-group 中输入一些描述，那么只要输入关注，它就会为标签设置样式。

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

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

【讨论】：

这应该是公认的答案。它可以在不影响元素顺序的情况下完成这项工作。
拥有几乎完整的（无 IE）浏览器支持，非常棒。感谢分享。
为我节省了大量工作和重组！也比替代品更具可读性 - Thx!!

【解决方案5】：

我认为你不能不改变你的 HTML，另见：Is there any way to hover over one element and affect a different element?，你的元素应该是直接的兄弟姐妹。（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

【讨论】：

【解决方案6】：

一种解决方案是在 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。

【讨论】：