48 lines
No EOL
1 KiB
HTML
48 lines
No EOL
1 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<style>
|
||
/* стиль для input с плейсхолдером */
|
||
|
||
.placeholder {
|
||
color: blue;
|
||
font-family: Georgia;
|
||
}
|
||
/* стиль для подсказки над элементом (вместо плейсхолдера при фокусировке) */
|
||
|
||
.placeholder-tooltip {
|
||
color: blue;
|
||
font-family: Georgia;
|
||
position: fixed;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<p>Красивый placeholder:</p>
|
||
|
||
<input type="email" data-placeholder="E-mail">
|
||
|
||
|
||
<script>
|
||
var input = document.querySelector('[data-placeholder]');
|
||
|
||
showPlaceholder(input);
|
||
|
||
// Показать placeholder внутри input
|
||
// Также можно сделать это при помощи вёрстки, отдельным элементом
|
||
function showPlaceholder(input) {
|
||
input.classList.add('placeholder');
|
||
input.value = input.dataset.placeholder;
|
||
}
|
||
|
||
// ...ваш код для input...
|
||
</script>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |