Невозможно изменить значки Цвет после фокусировки Div

Я довольно «новичок» на css и пытается изменить цвет FontAwesome значок, когда главный div сфокусирован. Я попробовал несколько методов, попытался изменить его цвет, используя div id или class на фокус, но никто не работал.Невозможно изменить значки Цвет после фокусировки Div

Я также пробовал active и hover Состояние просто для проверки, никто не работал.

HTML

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group"> 
    <label for="username" class="..">User Field <span class="..">*</span></label> 
    <div id="test" class="has-feedback"> 
     <input type="text" class="form-control" id="username" vk_1e5ee="subscribed"> 
     <span class="fa fa-user form-control-feedback" aria-hidden="true"></span> 
    </div> 
</div>

CSS

.form-control-feedback { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 2; 
    display: block; 
    width: 34px; 
    height: 34px; 
    line-height: 34px; 
    text-align: center; 
    pointer-events: none; 
} 

.form-control:focus .form-control-feedback:focus { 
    color:red; 
} 

/* 
#test:focus span .fa { 
    color:red; 
}*/

JSFiddle Ссылка:http://jsfiddle.net/xh8wsr5g/2/

я могу изменить цвет основного DIV при фокусировке, но не может изменить значок. Что бы вы мне посоветовали? Заранее спасибо.

источник

2016-04-15 Mesut K

Вы просто должны использовать селектор родственный.

Вашего шрифт-удивительный диапазон является родственным текстовым полем так, следующим друг за это не будет работать

.form-control:focus { 
    color:red; 
}

Вместо этого вы должны использовать следующий код

.form-control:focus + .form-control-feedback { 
    color:red; 
}

См скрипку здесь: http://jsfiddle.net/xh8wsr5g/1/

Таким образом, всякий раз, когда текстовое поле находится в фокусе, цвет шрифта-удивительного диапазона будет красным.

Смотрите эту ссылку о двойниках знаков В селекторе https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

источник

2016-04-15 08:57:31

Спасибо, я думал, что смогу использовать его как '.form-control: focus .form-control-feedback: focus'. Поскольку это не сработало для обоих, я попытался использовать селектор sibling через 'id', но это тоже не сработало, до вашего решения. –

@MesutK .form-control: focus .form-control-feedback: focus - пространство означает, что вы нацеливаете .form-control-feedback WITHIN .form-control. Вы можете использовать + (рядом), например, Kaushal, или использовать запятую. – Lewis

Вы не можете выполнить это только с помощью css, .form-control-feedback не является ребенком .form-control. Поэтому не будет никакого элемента доступны через .form-control:focus .form-control-feedback:focus, попробуйте использовать JQuery, чтобы изменить цвет:

$('.form-control').focus(function(){ 
    $('.form-control-feedback').css('color','red'); 
});

источник

2016-04-15 08:55:39

Спасибо за ответ! Он работает, но не полностью, после выхода из «фокуса» цвет снова остается «красным». Я мог бы изменить его с помощью другой строки кода, но метод sibling кажется очень полезным в этом случае. –

Решение jQuery для проблемы CCS кажется немного OTT. – Lewis

Да, для замены спины должно быть пятно, но в любом случае проблем нет. –

просто добавить этот код:

// to make the text color change 
.form-control:focus { 
    color:red; 
} 

// to make the icon color change 
.form-control:focus + .form-control-feedback { 
    color:red; 
}

вы можете попробовать это http://jsfiddle.net/xh8wsr5g/3/

источник

2016-04-15 09:11:15 Scarlet

Невозможно изменить значки Цвет после фокусировки Div

ответ

Смежные вопросы