Как стилизировать заполненный input без валидации?

Question

[Виктория]

Как можно стилизовать поле ввода, после внесения значения, если не задана валидация (required)? Стилизация необходима для всех полей, но не все они обязательны.

<input class="form-control" type="email" name="customer[email]" placeholder="Email">

input.form-control {
     width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px !important;
    border: 1px solid #C5C5C5;
    border-radius: 2px;
    padding: 17px 12px;
    min-height: 46px;
    line-height: 1.2;
    background-image: none;
}
input.form-control:focus {
    border: 1.5px solid rgba(162, 162, 162, 0.35);
    box-shadow: 0 0 1px 5px rgb(199 237 255 / 40%), 0 0 0 2px rgb(0 173 255 / 23%);
}

Comments

[mipfikus]

вам, возможно, помогут быстрее, если оставите ссылку на страницу с формой или приложите код в песочнице

[Raloynner]

https://jsfiddle.net/xmaLhpbv/7/

:not(:placeholder-shown)

[Виктория]

Ras, огромное Вам спасибо за помощь! это отлично работает! =)

Answer 1

[Игорь Махов]

В CSS нет селектора для input в зависимости от того ввел пользователь что-то или нет. Поэтому единственный способ - это применить такой хак с required:
https://jsfiddle.net/g854jk31/

Comments

[Виктория]

спасибо, но про этот способ я знаю.

[Raloynner]

Виктория Зоркина, https://jsfiddle.net/xmaLhpbv/7/ попробуйте вот этот вариант