Оформление placeholder разными стилями

Если требуется полностью изменить цвет или шрифт подсказки placeholder, то подойдет свойство ::placeholder, но в случаях когда нужны разные стили в одной подсказке он не поможет. Возможны альтернативы:

Атрибут required и псевдокласс invalid

При добавлении атрибута required к полю формы <input type="text">, начинает работать псевдокласс :invalid, который действует если поле не заполнено. Так работает первый вариант:

<label class="placeholder-box">
	<input required type="text">
	<div class="placeholder-text">Введите имя <strong style="color: red;">*</strong></div>
</label>
	
<label class="placeholder-box">
	<input required type="text">
	<div class="placeholder-text">Введите <span style="color: green;">e-mail</span></div>
</label>

<label class="placeholder-box">
	<input required type="text">
	<div class="placeholder-text">Введите пароль <i style="color: #999;">(8 символов)</i></div>
</label>
HTML

CSS:

.placeholder-box {
	display: block;	
	position: relative;
	margin: 20px 0;
}
.placeholder-box input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	line-height: 35px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 400;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 5px;
}
.placeholder-text {    
	display: none;
	width: 100%; 
	line-height: 37px;
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	color: #888;
	cursor: text;
	user-select: none;
}

.placeholder-box input:invalid + .placeholder-text {
	display: block;
}
CSS

Результат:

Второй вариант на JQuery

<label class="placeholder-box">
	<input type="text">
	<div class="placeholder-text">Введите имя <strong style="color: red;">*</strong></div>
</label>
	
<label class="placeholder-box">
	<input type="text">
	<div class="placeholder-text">Введите <span style="color: green;">e-mail</span></div>
</label>
	
<label class="placeholder-box">
	<input type="text">
	<div class="placeholder-text">Введите пароль <i style="color: #999;">(8 символов)</i></div>
</label>
HTML

JQuery:

$('.placeholder-box input').each(function(){     
	if (!$(this).val().length) {
		$(this).next().show();
	}
});

$('body').on('input', '.placeholder-box input', function(){      
	if ($(this).val().length) {
		$(this).next().hide();
	} else {
		$(this).next().show();
	}
});
JS

CSS:

.placeholder-box {
	display: block;	
	position: relative;
	margin: 20px 0;
}
.placeholder-box input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	line-height: 35px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 400;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 5px;
}
.placeholder-text {    
	display: none;
	width: 100%; 
	line-height: 37px;
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	color: #888;
	cursor: text;
	user-select: none;
}
CSS

Результат:

25.12.2020, обновлено 17.02.2021
1230
Предыдущая запись Псевдоклассы nth-child и nth-last-child
Следующая запись Таймер и задержка в JS

Комментарии

, чтобы добавить комментарий.

Другие публикации

Маски ввода для текстовых полей
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...
48859
0
Показать/скрыть пароль
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.
23315
+10
Не снимать фокус при клике по другому элементу
Имеем input text или textarea и кнопку с действием для выделенного текста. При нажатии на эту кнопку фокус перейдет к...
2383
+1
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
23357
+11
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
19408
+2
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
129234
+9