How do you make Placeholder and Label Transitions?
11,097
Solution 1
I found a good Codepen showing an example of how to do it in CSS.
HTML:
<div class="row">
<input id="name" type="text" name="name">
<label for="name">Full Name</label>
</div>
CSS:
.row {
position: relative;
margin-top: 35px;
}
input {
display: block;
padding: 8px 12px;
width: 100%;
max-width: 300px;
border-radius: 5px;
border: 0;
}
label {
position: absolute;
font-weight: 600;
color: #777777;
top: 50%;
left: 12px;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
cursor: text;
user-select: none;
transition: 0.15s ease-in-out;
}
input[data-empty="false"] + label,
input:valid + label,
input:focus + label {
top: -10px;
left: 0px;
font-size: 10px;
color: #ffffff;
}
Example: https://codepen.io/sivan/pen/alKwf
Solution 2
General sibling selectors & :focus
does the trick in a very simple way ;)
input{
position:absolute;
top:20px;
}
input ~ span{
transition:top .7s ease;
position:absolute;
top:20px;
}
input:focus ~ span{
top:0px;
}
<label>
<input>
<span>Text</span>
</label>
here is an example with multiple fields
https://jsfiddle.net/shLe3107/1/
hope this is enough else just ask
Author by
Tylaw38
Surfer by day, web developer by night. Currently website developing. Html, CSS, learning PHP
Updated on June 05, 2022Comments
-
Tylaw38 almost 2 years
I am looking to find an example of how to make a label / placeholder transition move up and out of placeholder position into a label position and vice versa..
Example: https://www.xero.com/us/signup/
-
Tylaw38 almost 8 yearsWhat about when you add text and then the label moves back down? How do you keep it above after entering text?
-
cocco almost 8 yearsyou need to add javascript to check if it's empty ... there is no simple solution. stackoverflow.com/questions/3617020/… stackoverflow.com/questions/16952526/…
-
cocco almost 8 yearsthere is nothing such input:empty or input[value=""]....btw in chrome input[value=""] should work... but the others?
-
cocco almost 8 yearsbasically with js check if there is text set the span fixed to top:0px;