Как создать сдвигающийся плейсхолдер | How to create a sliding placeholder
Данное решение выполнено через псевдокласс :placeholder-shown, который отображает текст подсказки, заданной атрибутом placeholder. Замена атрибута placeholder тегом label и последующая манипуляция им.
HTML КОД:
<div class="placeholder-form">
<div class="placeholder-container">
<input type="text" placeholder=" " />
<label>Фамилия</label>
</div>
<div class="placeholder-container">
<input type="text" placeholder=" " />
<label>Имя</label>
</div>
<div class="placeholder-container">
<input type="text" placeholder=" " />
<label>Отчество</label>
</div>
</div>
Атрибут placeholder является пустым, но он необходим, чтобы можно было использовать его псевдокласс:placeholder-shown, при отсутвиии которого можно сдвинуть элемент куда угодно.
CSS КОД:
.placeholder-form {
box-sizing: border-box;
width: 320px;
margin: 20px auto;
}
.placeholder-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.placeholder-container input {
background-color: #FFF;
border: 2px solid #BFE2FF;
box-sizing: border-box;
color: #000;
font-size: 16px;
line-height: 16px;
height: 50px;
outline: 0;
padding: 0 20px;
width: 100%;
}
.placeholder-container label {
color: #000;
font-family: Verdana, sans-serif;
background-color: #FFF;
font-size: 16px;
line-height: 16px;
padding: 5px 10px;
pointer-events: none;
position: absolute;
transition: all 200ms;
top: 12px;
left: 10px;
background-color: #FFF;
}
.placeholder-container input:focus + label,
.placeholder-container input:not(:placeholder-shown) + label{
top: -10px;
left: 10px;
font-size: 11px;
background-color: #BFE2FF;
padding: 2px 10px;
}
0 Комментарии