floating labels with pure CSS
Pure-CSS Float Label. Finally.
Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
- No JS! Pure CSS!
- No hacks with required and :valid!
- ↳ HTML5 validation support!
- Compatible with <select> and <textarea> fields!
- No need to define for="..." attribute on <label>
Views: 1000
2018
class="container"
class="field-container"
type="text" class="field" required placeholder="First name"
class="floating-label"First name
class="field-underline"
class="field-container"
type="text" class="field" required placeholder="Last name"
class="floating-label"Last name
class="field-underline"
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);
body{
background:#ffffff;
}
.field-container {
position: relative;
width: 200px;
margin-top:20px;
font-family: 'Roboto', sans-serif;
}
.field {
display:block;
width:100%;
padding:15px 10px 0;
border:none;
font-size:14px;
}
.field:focus {
outline: 0;
}
.floating-label {
position:absolute;
pointer-events:none;
top: 5px;
left:10px;
font-size: 10px;
opacity:0;
background-color: white;
padding: 0 2px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.field:valid + .floating-label {
opacity:1;
top:-5px;
color: #9e9e9e;
}
.field:focus + .floating-label {
color: #03a9f4;
}
.field-underline {
position:absolute;
