Это так называемые плавающие метки. Посмотрите на это:
Вам необходимо использовать атрибут placeholder, но вы можете установить его в HTML-сущность для пробела ( ), чтобы он был невидимым. Я написал это для максимальной совместимости браузера (за исключением того, что он не работает в IE9 или старше).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.field {
margin: 0 auto .5em;
padding-top: 1.5em;
position: relative;
}
/* Note that the <label> has to come after the field. for the CSS-only way to work. */
.field input:not([type=checkbox]):not([type=radio])~label,
.field textarea~label {
position: absolute;
top: .125em;
left: .125em;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
transform: translate3d(0,0,0);
-webkit-transition: all .5s .5s;
-moz-transition: all .5s .5s;
transition: all .5s .5s;
}
body .field[class] input[type]:-moz-placeholder~label,
.field textarea:-moz-placeholder~label {
-moz-transform: translateY(1.5em);
transform: translateY(1.5em);
cursor: text;
}
body .field[class] input[type]:-ms-input-placeholder~label,
.field textarea:-ms-input-placeholder~label { /* IE10-11 but not MS Edge */
transform: translateY(1.5em);
cursor: text;
}
body .field[class] input[type].placeholder-shown~label,
.field textarea.placeholder-shown~label { /* class added by the polyfill when applicable */
-moz-transform: translateY(1.5em);
-webkit-transform: translateY(1.5em);
transform: translateY(1.5em);
cursor: text;
}
/* Remember that unsupported pseudo-elements cause whole rules to be ignored, hence the repitition. */
body .field[class] input[type]:placeholder-shown~label,
.field textarea:placeholder-shown~label{
transform: translateY(1.5em);
transform: translate3d(0,1.5em,0);
cursor: text;
}
/* The selectors here get tricky due to specificity issues. I tried to make the
selectors fairly generic. If you have sufficient control over the markup,
the ":not()" and "[type]" selectors could be removed. */
.field[class] input:not([type=checkbox]):not([type=radio]):focus~label,
.field textarea:focus~label,
.field input:not([type=checkbox]):not([type=radio]):valid~label,
.field textarea:valid~label {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
transform: translate3d(0,0,0);
-webkit-transition: all .25s;
-moz-transition: all .25s;
transition: all .25s;
}
</style>
</head>
<body>
<div class="field">
<input type="text" id="field1" placeholder=" ">
<label for="field1">My First Field</label>
</div> <!-- /.field -->
<div class="field">
<input type="text" id="field2" placeholder=" " value="some text">
<label for="field2">Another Field</label>
</div> <!-- /.field -->
<p>This works, without JS, in evergreen browsers (Firefox, Chrome, Safari, etc.) and
IE10-11. A polyfill is used to support
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12435951--placeholdershown-css-pseudo-class">MS Edge</a> (support for the
IE10 pseudo-class was removed but the non-prefixed one was not added) and
old versions of browsers from other organizations.</p>
<script>
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
/*!
* Polyfill for pseudo selector :placeholder-shown
* Author: Subash Selvaraj (github userid:sesubash) & enhanced by Kravimir
*/
(function(){var d=document,u=null,o={init:function(){var p="placeholder",h=d.querySelector("head"),t=d.createElement("input"),s=d.createElement("style"),r="{padding-top:183px}";t.setAttribute("id","PhSTf");t.setAttribute(p,"\x20");s.textContent="#PhSTf{position:absolute;visibility:hidden}#PhSTf:"+p+"-shown"+r+"#PhSTf:-ms-input-"+p+""+r+"#PhSTf:-moz-"+p+r;h.appendChild(s);t=d.body.appendChild(t);var y=window.getComputedStyle(t,u).paddingTop;d.body.removeChild(t);h.removeChild(s);if(y==="183px"){d.documentElement.classList.add("placeholderPseudo");return}d.querySelectorAll("input["+p+"],textarea["+p+"]").forEach(function(i){if(i.getAttribute(p)!="")o.update.call(i);for(var n=0,a=["blur","keyup","input"];n<a.length;n++)i.addEventListener(a[n],o.update,u);})},update:function(){this.classList[this.value?"remove":"add"]("placeholder-shown");for(var l=this.nextSibling;l;l=l.nextSibling)if(l.nodeType==1&&l.nodeName.toLowerCase()=='label')l.classList.toggle('androidFix');}};if(/^[ci]|d$/.test(d.readyState||"")){o.init()}else{d.addEventListener("DOMContentLoaded",o.init,u)}window.placeholderShownPolyfill=o;d.documentElement.classList.add("phsJS")})();
</script>
</body>
</html>