Decided to use labels as placeholders and keep them persistent while typing.
A Pen by Scott Zirkel on CodePen.
<div class="input--group"> | |
<label for="name">Name</label> | |
<input type="text" name="name" required> | |
</div> | |
<div class="input--group"> | |
<label for="email">Email</label> | |
<input type="text" name="email"> | |
</div> |
Decided to use labels as placeholders and keep them persistent while typing.
A Pen by Scott Zirkel on CodePen.
$('input').focusin(function() { | |
$(this).parent().attr('class', 'input--group__active'); | |
$(this).css('outline-color', '#faf8f1'); | |
}); | |
$('input').focusout(function() { | |
$(this).parent().attr('class', 'input--group'); | |
$(this).css('background', '#fff'); | |
}); | |
$('input[required]').focusin(function() { | |
$(this).css('background', '#f5d8d8'); | |
$(this).css('outline-color', '#e3b5b5'); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
html { box-sizing: border-box; } | |
* { box-sizing: inherit; } | |
body { | |
background: #faf8f1; | |
} | |
%input--group { | |
position: relative; | |
background: white; | |
border: 1px solid #676159; | |
width: 40em; | |
height: 3em; | |
display: inline-block; | |
margin: 1em; | |
label { | |
position: absolute; | |
top: 1em; | |
left: 1em; | |
color: #676159; | |
opacity: .5; | |
z-index: 2; | |
transition: all 0.2s ease-in-out; | |
padding-left: 2px; | |
padding-right: 2px; | |
font-weight: 400; | |
} | |
input { | |
position: absolute; | |
top: 0; | |
left: 0em; | |
height: 100%; | |
width: 100%; | |
padding-left: 1em; | |
padding-right: 1em; | |
background: transparent; | |
border: 0; | |
} | |
} | |
.input--group { | |
@extend %input--group; | |
&__active { | |
@extend %input--group; | |
label { | |
font-weight: 700; | |
transform: translate(0, -1.5em) scale(1.1, 1.1); | |
background: linear-gradient(#faf8f1, #faf8f1 0.35em, transparent 0.55em, transparent); | |
opacity: 1; | |
} | |
} | |
} |