How to do floating of labels in CSS - html

Question

I want to display the label of an input inside its input, so that when I click the input, the label will animate and go above the input and change the styles of the input's border.
Like so:
* {
margin: 0;
padding: 0;
}
form {
width: 100%;
max-width: 500px;
margin: 0 auto;
outline: 1px solid lightgrey;
padding: 10px;
}
label, input[type='text'], input[type='password'] {
font-size: 12pt;
padding: 8px;
}
label {
color: grey;
}
input {
border: none;
outline: none;
border-bottom: 1px solid grey;
}
<form>
<label for="username">Username</label>
<input id="username" name="username" type="text"/>
<br/>
<label for="password">Password</label>
<input id="password" name="password" type="password"/>
<br/>
<input type="submit" value"login"/>
</form>
How can I achieve this with CSS?

Answer 1

This looks a lot like the Google new material design inputs.
I created custom inputs for you that look like what you are looking for.
.input-group {
position: relative;
margin: 40px 0 20px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display:block;
width:315px;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#-moz-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Username</label>
</div>
<div class="input-group">
<input type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>

Answer 2

Edited #23 Dec 2017
This will also help you. Considering your image i am asking you want to change text after click?
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required>
<input placeholder="Password" type="password" required>

Answer 3

Check this Tutorial Link
Demo Link
This is inspired by latest Gmail Login style
HTML
<div class="form-wrapper-outer">
<div class="form-logo">
<img src="https://www.freakyjolly.com/wp-content/uploads/2017/08/cropped-fjlogo2.png" alt="logo">
</div>
<div class="form-greeting">
<span>It's nice to meet you.</span>
</div>
<div class="field-wrapper">
<input type="email" name="email" id="">
<div class="field-placeholder"><span>Enter your email</span></div>
</div>
<div class="field-wrapper">
<input type="password" name="password" id="">
<div class="field-placeholder"><span>Enter your password</span></div>
</div>
<div class="form-button">
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
CSS Style
.field-wrapper{
position: relative;
margin-bottom: 15px;
}
.field-wrapper input{
border: 1px solid #DADCE0;
padding: 15px;
border-radius: 4px;
width: 100%;
}
.field-wrapper input:focus{
border:1px solid #1A73E8;
}
.field-wrapper .field-placeholder{
font-size: 16px;
position: absolute;
/* background: #fff; */
bottom: 17px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #80868b;
left: 8px;
padding: 0 8px;
-webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
z-index: 1;
text-align: left;
width: 100%;
}
.field-wrapper .field-placeholder span{
background: #ffffff;
padding: 0px 8px;
}
.field-wrapper input:not([disabled]):focus~.field-placeholder
{
color:#1A73E8;
}
.field-wrapper input:not([disabled]):focus~.field-placeholder,
.field-wrapper.hasValue input:not([disabled])~.field-placeholder
{
-webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
transform: scale(.75) translateY(-39px) translateX(-60px);
}
jQuery Event Listener
$(".field-wrapper .field-placeholder").on("click", function () {
$(this).closest(".field-wrapper").find("input").focus();
});
$(".field-wrapper input").on("keyup", function () {
var value = $.trim($(this).val());
if (value) {
$(this).closest(".field-wrapper").addClass("hasValue");
} else {
$(this).closest(".field-wrapper").removeClass("hasValue");
}
});

Answer 4

I Hope this will also help you.
The input animation happens when we add required attribute in it, this can be done without adding required attribute also.
HTML
<div class="floating-label">
<input class="floating-input" type="text" placeholder=" ">
<label>Text</label>
</div>
<div class="floating-label">
<input class="floating-input" type="text" onclick="(this.type='time')" placeholder=" ">
<label>Time</label>
</div>
<div class="floating-label">
<input class="floating-input" type="text" onclick="(this.type='date')" placeholder=" ">
<label>Date</label>
</div>
<div class="floating-label">
<input class="floating-input" type="password" placeholder=" ">
<label>Password</label>
</div>
<div class="floating-label">
<select class="floating-select" onclick="this.setAttribute('value', this.value);" value="">
<option value=""></option>
<option value="1">Alabama</option>
<option value="2">Boston</option>
<option value="3">Ohaio</option>
<option value="4">New York</option>
<option value="5">Washington</option>
</select>
<label>Select</label>
</div>
<div class="floating-label">
<textarea class="floating-input floating-textarea" placeholder=" "></textarea>
<label>Textarea</label>
</div>
CSS
.floating-label {
position:relative;
margin-bottom:20px;
}
.floating-input , .floating-select {
font-size:14px;
padding:4px 4px;
display:block;
width:180px;
height:30px;
background-color: transparent;
border:none;
border-bottom:1px solid #757575;
}
.floating-input:focus , .floating-select:focus {
outline:none;
border-bottom:2px solid #5264AE;
}
label {
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:5px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
top:-18px;
font-size:14px;
color:#5264AE;
}
.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
top:-18px;
font-size:14px;
color:#5264AE;
}
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
width:50%;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.floating-textarea {
min-height: 30px;
max-height: 260px;
overflow:hidden;
overflow-x: hidden;
}
DEMO
Floating Label's - Pure CSS - without Required*

Answer 5

.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
background: #fff;
padding: 40px;
border: 1px solid red;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.box input {
padding: 10px 0;
margin-bottom: 30px;
}
.box input {
width: 100%;
box-sizing: border-box;
box-shadow: none;
outline: none;
border: none;
border-bottom: 2px solid #999;
}
.box form div {
position: relative;
}
.box form div label {
position: absolute;
top: 10px;
left: 0;
color: #999;
transition: 0.5s;
pointer-events: none;
}
.box input:focus~label,
.box input:valid~label {
top: -12px;
left: 0;
color: red;
}
.box input:focus,
.box input:valid {
border-bottom: 2px solid red;
}
<div class="box">
<form>
<div>
<input type="text" name="" required="">
<label>First Name</label>
</div>
<div>
<input type="text" name="" required="">
<label>Last Name</label>
</div>
</form>
</div>

Answer 6

Like #daniel-j-abraham i use the input:not(:placeholder-shown) ~ label method. You just need to set a placeholder=" " (with a space) to your inputs (see this pen for live example)
it works just like the required method but it's way more convenient since it works also with non required fields.
i don't understand why this method isn't more used / upvoted ^^
CODE :
HTML :
<form class="contactForm">
<div>
<input id="contactName" value="" name="name" type="text" placeholder=" ">
<label for="contactName">name</label>
</div>
<div>
<input id="contactCompany" value="" name="company" type="text" placeholder=" ">
<label for="contactCompany">company</label>
</div>
<div>
<input id="contactPosition" value="" name="position" type="text" placeholder=" ">
<label for="contactPosition">position</label>
</div>
<div>
<button type="submit" class="submit">Send</button>
</form>
CSS:
/*basic styling */
.contactForm {
text-align: center;
margin: auto;
width: 300px;
padding-top: 15px
}
.contactForm > div {
position: relative;
width: 100%;
}
.contactForm > div input {
width: 100%;
height: 42px;
margin: 10px;
border: none;
border-bottom: 2px solid #eee;
border-left: 2px solid #eee;
padding: 0 10px;
transition: all .3s ease;
outline: none !important;
}
.contactForm > div label {
position: absolute;
top: 0;
left: 0;
margin: 20px;
transition: all .3s ease;
}
.contactForm > div input:focus {
border-color: #ff6291;
}
.contactForm > div input:not(:placeholder-shown) {
border-color: #26e9b9;
}
/* END of basic styling*/
/*************************************************/
/* NOW that's the part that interests us */
/*************************************************/
/* label goes up when input is focused OR filled */
.contactForm > div input:focus ~ label,
.contactForm > div input:not(:placeholder-shown) ~ label {
font-size: 12px;
transform: translateY(-30px);
}
/* label color on focused state */
.contactForm > div input:focus ~ label {
color: #ff6291;
}
/* label color on filled state */
.contactForm > div input:not(:placeholder-shown) ~ label {
color: #26e9b9;
}
/* button styling */
.submit {
color: #fff!important;
background-image: linear-gradient(to right,#ff017d 0,#ff7f78 40%,#fff 50%,#26e9b9 60%,#44c0ff 100%)!important;
background-size: 300% 200%!important;
background-position: -1px 0;
transition: background-position .3s;
border: none!important;
border-radius: 50px;
padding: 10px 42px;
text-transform: uppercase;
}
.submit:hover {
background-position: 95% 0 !important;
cursor: pointer;
}