Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.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; } |
Добавить комментарий: