With this css-only solution you only show the 's when necessary, the error state always shows the label.
A Pen by Jankees van Woezik on CodePen.
With this css-only solution you only show the 's when necessary, the error state always shows the label.
A Pen by Jankees van Woezik on CodePen.
<p> | |
With this css-only solution you only show the ‹labels› when necessary, the error state always shows the label. | |
</p> | |
<p> | |
Please note that the CSS is more complicated that in could be mostly because of the mobile and desktop compatibility. The most important part of this technique is the "input:focus ~ label" Also please note that the label have to be after the input. | |
</p> | |
<div class="text-input"> | |
<input type="text" id="input_1" placeholder="First name"> | |
<label for="input_2">Please enter your first name</label> | |
</div> | |
<div class="text-input"> | |
<input type="text" id="input_1" placeholder="Last name"> | |
<label for="input_2">Please enter your last name</label> | |
</div> | |
<div class="text-input"> | |
<input type="text" id="input_1" placeholder="Email address" class="error"> | |
<label for="input_2" class="error">This is no valid email address</label> | |
</div> |
@import "bourbon" | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans) | |
$font: 'Open Sans', sans-serif | |
$blue: #57B1E0 | |
$red: #FF0040 | |
$font-color: #3B3B33 | |
body | |
padding: 10px 30px | |
max-width: 400px | |
.text-input | |
position: relative | |
margin-bottom: 3px | |
height: 55px | |
input[type="text"], | |
input[type="password"] | |
outline: 0 | |
padding: 12px 0px | |
width: 100% | |
border: none | |
border-bottom: 1px solid #E3E3E3 | |
color: $font-color | |
font-size: 15px | |
font-family: $font | |
font-weight: normal | |
height: 25px | |
-webkit-appearance: none | |
border-radius: 0 | |
.no-touch & | |
@include transition(all, 0.15s) | |
&:focus, &.error | |
$move: 8px | |
padding: (12px + $move) 0px (12px - $move) | |
&:focus ~ label, &.error ~ label | |
opacity: 1 | |
.text-input label | |
font-family: $font | |
opacity: 0 | |
position: absolute | |
top: 6px | |
left: 0 | |
color: $blue | |
font-size: 10px | |
.no-touch & | |
@include transition(all, 0.15s) | |
&.error | |
color: $red |