Цвет переключения формы при вводе текста (CSS)

Question

У меня есть форма с видео в фоновом режиме. Когда текст не вводится в поля ввода, я хочу, чтобы у них была непрозрачность 0. Но когда значение не равно нулю, я хочу, чтобы у них был цвет фона. Я думал, что я могу использовать заполнитель для этого.

Теперь у меня только цвет фона, показывающим, когда вход находится в фокусе, как вы можете увидеть ниже

.for_ajax_contact #contactform input[type="text"]:focus, .for_ajax_contact #contactform textarea:focus { 
 
\t outline-width: 0; 
 
\t background-color: #fff; 
 
\t opacity: 0.8; 
 
\t transition: all 0.3s linear 0s !important; 
 
\t -webkit-transition: all 0.3s linear 0s !important; 
 
}

Любая идея?

Answer 1

Вы можете сделать это без JavaScript, но есть улов. Вам нужно будет использовать атрибут HTML5 required на textarea/input и создать псевдослот :valid для каждого элемента формы.

input, 
 
textarea { 
 
    background: white; 
 
} 
 

 
input:valid, 
 
textarea:valid { 
 
    background: green; 
 
    color: white; 
 
}

<input required type="text"> 
 

 
<textarea required></textarea>

Если это не является предпочтительным, вам нужно идти по пути JavaScript, как комментатора предложил.

Answer 2

Существует псевдо-класс CSS :placeholder-shown, который определяет, присутствует ли местозаполнитель. К сожалению, это спецификация для CSS Level 4, и она работает только в браузерах WebKit на момент написания.

input:placeholder-shown { 
 
    background: black; 
 
}

<input placeholder="Test" />