Как изменить цвет label при активном input?

Question

[Darkness]

Нужно чтобы при активной input label менял цвет текста,
но даже если for есть , меняется только при наведении на сам label. Т.е. input активный, но пока не наведешь на label изменения не увидишь, а нужно чтобы они работали связано, спасибо за помощь!

Как есть:

Как нужно:

.form-fields-group-label {
    position: absolute;
    font-size: 13px;
    color: #27252a;
    margin-top: 34px;
    font-family: 'Roboto', sans-serif;
    margin-left: 16px;
    padding-top: 5px;
}

.form-fields-input {
    margin-top: 34px;
    padding: 30px 142px 8px 16px;
    border: none;
    background: #EAEAEE;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

<div class="form-fields-group">
        <label class="form-fields-group-label" for="name">Название Группы</label>
        <input type="text" id="name" class="form-fields-input" placeholder="Введите название группы" required>
      </div>

Comments

[Rustam Bainazarov]

Делай обёртку на flex'ах. Ставь всё после input, чтобы можно было ловить по паттерну input:focus ~ label. Порядок следования делай с помощью order.

[Дмитрий]

Пример

[Darkness]

Дмитрий, Спасибо! Напиши ответ, зачту!

[Darkness]

SmthTo, Спасибо за информацию!

[Darkness]

Дмитрий, и еще вопрос, вот написали мы что-то, оставить в таком же положении цвет фона , как можно сделать? А то базу поставил, наведении тоже, а вот после того как что-то туда вписали, не знаю даже как реализовать, буду очень благодарен!

[Darkness]

SmthTo, и еще вопрос, вот написали мы что-то, оставить в таком же положении цвет фона , как можно сделать? А то базу поставил, наведении тоже, а вот после того как что-то туда вписали, не знаю даже как реализовать, буду очень благодарен!

[Rustam Bainazarov]

Антон Добрынин, можно сделать с помощью :focus-within для обёртки. И подсветку label, кстати, тоже.

shpargalkablog.ru/2017/12/focus-within.html

[Дмитрий]

Пример 2

[Rustam Bainazarov]

Антон Добрынин, если не устраивает поддержка этого псевдо-селектора, то либо делать input всей зоной действия, а label — на position: absolute.

Либо делать фон с помощью абсолютно позиционированногг блока внутри родительского контейнера. И его стили делать по тому же паттерну.

[Darkness]

Дмитрий, не вижу изменений, код вижу, изменений нет

[Darkness]

Дмитрий, т.е. есть инпат - сервый фон. Наводим - белый фон. Что-то вписали - белый фон остается.
Первые два уж сделал, а вот с 3 хз как, спасибо!

[Darkness]

SmthTo, по статьи прошелся, потыкал по инпатам никаких изменений) но спасибо, теперь буду знать об этом!

[Darkness]

Дмитрий, Спасибо, разобрался и сделал! У вас не работает данный псевдокласс, у меня сработало, спасибо!

[Rustam Bainazarov]

Антон Добрынин, пришлите код, что не работает с фоном.

[Darkness]

SmthTo, c фоном все работает теперь (:valid) использовал, но вот label не меняет цвет с данным псевдоклассом :с

.form-fields-input:valid + .form-fields-email-label  {
    position: absolute;
    font-size: 13px;
    color: #848387;
    margin-top: 34px;
    font-family: 'Roboto', sans-serif;
    margin-left: 18px;
    padding-top: 5px;
}

[Darkness]

SmthTo, т.е. с фоном разобрались, он белый если что-то в нем есть, но вот label нет, т.е. он не серый остается, а таким же черным

[Rustam Bainazarov]

Антон Добрынин, короче:

[Darkness]

SmthTo, нет изменений, не вижу их точнее. Может не понял, вот ввел что-то в input, label стал другого цвета ( только если есть что-то в input)

[Rustam Bainazarov]

Антон Добрынин, нажми input.

[Rustam Bainazarov]

Тебе ещё надо, чтобы фон оставался, если что-то есть в поле?

[Rustam Bainazarov]

Антон Добрынин, короче, не знаю, может, у тебя экран из начала 90-х, тогда вот так, думаю, увидишь:


Фон остается окрашенным. Кликай input.

[Darkness]

SmthTo, ахаха это edge ****** скорее всего не так, приду покажу, уже запутался.

[Darkness]

SmthTo, смотри, вот что нужно. На 2 скрине выделил, нужно чтобы если там что-то есть , то цвет менялся на серый (надпись которая была синий) , если там ничего нет , что ничего не происходит.

Не знаешь в чем может быть проблема? 3 input просто не применяет стиль ( первые два норм) задано по class у всех одинаковые, но он просто не хочет применять его --

[Darkness]

Дмитрий, смотри, вот что нужно. На 2 скрине выделил, нужно чтобы если там что-то есть , то цвет менялся на серый (надпись которая была синий) , если там ничего нет , что ничего не происходит.

Не знаешь в чем может быть проблема? 3 input просто не применяет стиль ( первые два норм) задано по class у всех одинаковые, но он просто не хочет применять его -- /// Решено: он применяет ТОЛЬКО если корректно введен ( типа @)

Answer 1

[Alexander]

Comments

[Alexander]

Антон Добрынин, отметьте пожалуйста мой ответ как решение, если он помог вам в решении Вашей проблемы.

[Darkness]

Alexander, мне не при наведении нужно было , а после вписания чего-либо, использовать :valid, теперь также нужно только для label, но он уже не робит :с

[Alexander]

Антон Добрынин,

[Alexander]

Антон Добрынин, вот вариант без всяких дополнительных классов (см.выше)

[Darkness]

Alexander, смотри, вот что нужно. На 2 скрине выделил, нужно чтобы если там что-то есть , то цвет менялся на серый (надпись которая была синий) , если там ничего нет , что ничего не происходит.

Не знаешь в чем может быть проблема? 3 input просто не применяет стиль ( первые два норм) задано по class у всех одинаковые, но он просто не хочет применять его --