"Floating Label Using CSS"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container my-5 py-5 text-center">
<h2>Floating Label</h2>
<hr/><br/><br/>
<div class="row align-items-center h-100">
<div class="col-md-5 mt-5">
<h5>Label <span style="color:#1AB9A7">Inside</span> of Input filed</h5>
<div class="position-relative mt-4">
<input type="text" required />
<span class="floating-label">First name</span>
<i class="fa fa-user-o input-icon"></i>
</div>
<div class="position-relative mt-4">
<input type="text" required />
<span class="floating-label">Last name</span>
<i class="fa fa-user-o input-icon"></i>
</div>
<div class="position-relative mt-4">
<input type="text" required />
<span class="floating-label">Email ID</span>
<i class="fa fa-envelope-o input-icon"></i>
</div>
<div class="position-relative mt-4">
<input type="text" required />
<span class="floating-label">Enter City</span>
<i class="fa fa-globe input-icon"></i>
</div>
</div>
<div class="border border-top-0 col-md-2 h-100 d-none d-sm-block" style="transform: rotate(90deg);"></div>
<div class="col-md-5 mt-5">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
h2{font-weight:100!important;text-transform:uppercase;letter-spacing:3px;color:#727272!important}
h5{font-size:14px!important;font-weight:400!important;text-transform:uppercase;letter-spacing:3px;color:#626262!important;text-align:left}
/********* Label Inside of Input filed *********/
input,input[type=text]{color:#555;width:100%;font-size:15px;height:52px;line-height:normal;border:#ddd solid
1px;border-radius:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-bottom:-1px;padding:10px 10px 0 40px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1}
input:focus,select:focus{outline:0!important;color:#555!important;border-color:#9e9e9e;z-index:2}
input:focus~.floating-label input:not(:focus):valid~.floating-label{top:7px;left:40px;font-size:10px;opacity:1;font-weight:400}
input:focus~.floating-label,input:valid~.floating-label{top:5px;opacity:1;font-size:10px;color:#727272}
input:focus~.floating-label,input:not(:focus):valid~.floating-label{left:40px}
input:focus~.input-icon{color:#383838}
.floating-label{position:absolute;pointer-events:none;left:40px;top:16px;transition:.2s ease all;color:#777;font-weight:400;font-size:14px;letter-spacing:.5px;z-index:3;text-transform:uppercase}
.input-icon{position:absolute;top:18px;left:15px;z-index:3;color:#727272}
/********* Label Outside of Input filed *********/
input.outside,input[type=text].outside{color:#555;width:100%;font-size:15px;height:52px;line-height:normal;border:#ddd solid
1px;border-radius:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-bottom:-1px;padding:10px 10px 10px 40px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1}
input:focus,select:focus{outline:0!important;color:#555!important;border-color:#9e9e9e;z-index:2}
input:focus~.floating-label-outside input:not(:focus):valid~.floating-label-outside{top:12px;left:40px;font-size:10px;opacity:1;font-weight:400}
input:focus~.floating-label-outside,input:valid~.floating-label-outside{top:-7px;opacity:1;font-size:10px;color:#727272;background:#fff;padding:0px 5px;}
input:focus~.floating-label-outside,input:not(:focus):valid~.floating-label-outside{left:35px}
.floating-label-outside{position:absolute;pointer-events:none;left:40px;top:16px;transition:.2s ease all;color:#777;font-weight:400;font-size:14px;letter-spacing:.5px;z-index:3;text-transform:uppercase}
.input-icon-outside{position:absolute;top:18px;left:15px;z-index:3;color:#727272;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Floating Labels in 3 lines of jQuery
Awesome discount label
Float label simple

Questions / Comments: