Подскажите, как сделать placeholder
над рамкой input
? z-index
не работает. Оставил его в коде на всякий случай. Есть вариант использовать span
или label
с абсолютным позиционированием но label
уже занят, а лишние элементы не хотелось бы вводить без необходимости. Хочется сделать так:
form {
display: flex;
flex-direction: column;
}
input {
width: 200px;
height: 30px;
}
input::placeholder {
transition-duration: .3s;
background-color: white;
padding: 3px;
z-index: 100;
}
input:focus::placeholder {
font-size: 14px;
transform: translateY(-18px);
z-index: 100;
}
<form>
<label for="female">Фамилия:</label><br>
<input id="female" placeholder="Фамилия *" required>
<label for="name">Имя:</label><br>
<input id="name" placeholder="Имя *" required>
<label for="surname">Отчество:</label><br>
<input id="surname" placeholder="Отчество">
</form>
https://codepen.io/Merlin1618/pen/jKVBLL
Есть вариант подключить jQuery библиотеку (jQuery-Floating-Placeholder), но хотелось бы обойтись своими силами.
input
каким-либоdiv
и добавляйте элементы сposition: absolute
. Псевдоэлементы дляinput
работают только в Chrome. И вам к тому же надо во всеinput
добавить крестики, поэтому без этого не обойтись.