Placeholder should go up while typing input without using required and placeholder attribute using css

后端未结

关注

 1  1165

When I type the input field label should go up. otherwise label should be placed inside the input. I have attached the sample image.Please refer the username and password fi

相关标签:

1条回答

南笙

2021-01-17 07:24

Those are called "floating labels". Have a look at these:

https://css-tricks.com/float-labels-css/
How to do floating of labels in CSS
https://medium.com/simple-human/floating-labels-are-a-bad-idea-82edb64220f6

You do need to use the placeholder attribute, but you can set it to the HTML entity for a space character ( ), so it's invisible. I wrote this for maximum browser compatibility (except it doesn't work in IE9 or older).

<!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="&#32;">
    <label for="field1">My First Field</label>
</div> <!-- /.field -->
<div class="field">
    <input type="text" id="field2" placeholder="&#32;" 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>

0 讨论(0)