Сдвигающийся плейсхолдер

Данное решение выполнено через псевдокласс :placeholder-shown, который отображает текст подсказки, заданной атрибутом placeholder.

Пример:

Фамилия

Имя

Отчество

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>

<label>Фамилия</label>

</div>

</div>

<label>Отчество</label>

</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;
}

.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;

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 03.12.2020
Рубрики: Формы
Метки: CSS
12999 просмотров

Смотрите также:

Запоминание данных формы

Запоминание введенных данных в элементах формы

Стилизованная рабочая форма обратной связи

Создание формы обратной связи с валидацией, оформлением, отправкой письма и описанием

Слайдер для radio кнопок

jQuery плагин radios-to-slider для создания слайдера из radio кнопок

Добавить комментарий:

Ваш комментарий отправлен!

Станислав: 04.01.2024 в 19:26

Здравствуйте! А форму обратной связи с плагина Contact Form 7 вообще реально этим обернуть? Никогда не пользовался можно сказать данным плагином, но пользоваться стал другим плагином, который работает в тандеме с Contact Form 7. Формы у него просто ужасные. Вот этим бы хотелось решением хотелось бы и украсить серые будни пользования плагином Contact Form 7

Ответить
Владимир: 22.04.2022 в 04:51

Здравствуйте. поставил на сайт вашу форму и пытаюсь прописать ваш урок по СДВИГАЮЩИЙСЯ ПЛЕЙСХОЛДЕР. Всё равно как было что пропадает текст с формы так и пропадает. Подскажите, пожалуйста на примере фашей формы как правильно прописать?

Ответить
- Alexander: 22.04.2022 в 16:45
  
  Я не могу ничего подсказать не видя, что у вас получилось.
  И хотел бы еще отметить, что в блоге нет уроков, я просто выкладываю свои и чужие идеи со своей точки зрения, плюс стараюсь сделать максимально удобное их применение (в первую очередь для себя).
  
  Другими словами тут решения не всегда вставил и готово, иногда нужно уметь это все модифицировать и подстаривать или заказать (благодаря этому и есть возможность делать этот блог).
  
  Ответить
  - Владимир: 22.04.2022 в 23:29
    
    Здраствуйте Александр. Сделал вот так
    
    <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"> и всё равно нечего не выходит
    
    Ответить
    - Alexander: 24.04.2022 в 16:50
      
      В понедельник скину рабочий пример, было где то такое решение.
      
      Ответить
      - Владимир: 24.04.2022 в 18:01
        
        Здравствуйте. Спасибо большое, буду ждать рабочего примера. Вам бы ещё на сайт добавлять видео обзоры, очень даже сильно бы облегчило бы для новичков.
        
        Ответить
        
        Alexander: 25.04.2022 в 11:17
        
        Вот пример
        
        Ответить
        
        Владимир: 25.04.2022 в 23:50
        
        Здравствуйте Александр. И спасибо вам большое за предоставленное решение!

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии: