Как менять цвет у лейблов в неактивных полях ввода?

Question

[istasiik]

Использую вот это решение: https://github.com/maman/JVFloat.js/tree/master При начале ввода там над полем ввода появляются лейблы с текстом из плейсхолдера. Как сделать так, что бы в неактивном поле ввода цвет был другой? Весь код можете увидеть в гитхабе

Answer 1

[Никита]

Без модификации данного плагина можно это сделать только при помощи JS. Что-то вроде этого

$('input').focus(function() {
  $(this).siblings('.placeHolder').addClass('focus');
});
$('input').focusout(function() {
  $(this).siblings('.placeHolder').removeClass('focus');
});

в css изначально присвоить .placeHolder "неактивный" стиль. Ему же с классом focus соотетственно "активный".

.jvFloat .placeHolder.focus {
  color: #212121;
}
.jvFloat .placeHolder.focus.required {
  color: red;
}
.jvFloat .placeHolder {
  /*...*/
  color: #a5a5a5;
  /*...*/
}

Comments

[istasiik]

Сделал вот так: CSS

.jvFloat .placeHolder {
  font-family: 'helvetica'; 
  font-style: normal;
	position: absolute;
    float: left;
	top: 31px;
	left: -110px;
	color: #dbdbdb ;
	font-size: 13px;
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition: -webkit-transform 150ms, opacity 100ms, visibility 100ms;
	transition: transform 150ms, opacity 100ms, visibility 100ms;
	opacity: 0;
	visibility: hidden;
    width: 200px;
    text-align: left; 
}

.jvFloat .placeHolder .focus {
    color: #5cc1ec ;
}

А в самый конец js функции добавил эти строки:

$('input').focus(function() {
  $(this).siblings('.placeHolder').addClass('focus');
});
$('input').focusout(function() {
  $(this).siblings('.placeHolder').removeClass('focus');
});

Не работает, почему то

[Никита]

.jvFloat .placeHolder .focus {
    color: #5cc1ec ;
}

Пробел между .placeHolder и .focus лишний.

[istasiik]

@kascode Спасибо вам огромное, работает!