На вкладке изменения цвета изменения метки. Как?

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, смотрите также: Is there any way to hover over one element and affect a different element?, ваши элементы должны быть прямыми братьями и сестрами. (LESS не поможет решить вашу проблему здесь, МЕНЬШЕ генерировать CSS и это кажется невозможным сделать в CSS)

Возможное предложение:

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

<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

Одним из решений было бы переместить label ниже input в DOM, но поместить их абсолютно (в родителя), чтобы 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.