Показывать местозаполнитель в качестве метки, когда фокус на текстовом поле не является обязательным

Question

Я хочу показать метку-заполнитель при нажатии на текстовое поле. я сделал с "обязательными" текстовыми полями.

<input type="text" class="inputText" required>

Но как этого добиться, не требуя, как:

<input type="text" class="inputText">

Я пытался https://jsfiddle.net/273ntk5s/3680/

Answer 1

Вам необходимо удалить

.user-input-wrp .inputText:not(:focus):valid ~ .floating-label

часть вашего css, потому что вы применяете стиль "focus", когда поле имеет значение ": valid". Если он не требуется, он автоматически «действителен».