Пример:
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; } |
Здравствуйте. поставил на сайт вашу форму и пытаюсь прописать ваш урок по СДВИГАЮЩИЙСЯ ПЛЕЙСХОЛДЕР. Всё равно как было что пропадает текст с формы так и пропадает. Подскажите, пожалуйста на примере фашей формы как правильно прописать?
Я не могу ничего подсказать не видя, что у вас получилось.
И хотел бы еще отметить, что в блоге нет уроков, я просто выкладываю свои и чужие идеи со своей точки зрения, плюс стараюсь сделать максимально удобное их применение (в первую очередь для себя).
Другими словами тут решения не всегда вставил и готово, иногда нужно уметь это все модифицировать и подстаривать или заказать (благодаря этому и есть возможность делать этот блог).
Здраствуйте Александр. Сделал вот так
<div id="message"></div> <div class="forma"> <div class="form-at"> <div class="validate-input-at w-50" data-validate="Обязательно"> <div class="placeholder-container"> <input class="input-at" type="text" name="name-at" placeholder="Имя" /> <span class="focus-input-at"></span> </div>Добавляю <div class="placeholder-container"> и всё равно нечего не выходит
В понедельник скину рабочий пример, было где то такое решение.
Здравствуйте. Спасибо большое, буду ждать рабочего примера. Вам бы ещё на сайт добавлять видео обзоры, очень даже сильно бы облегчило бы для новичков.
Вот пример
Здравствуйте Александр. И спасибо вам большое за предоставленное решение!