<div class="container">
<form action="" class="search">
<div class="field">
<input type="text" class="input-search" id="input-search" name="input-search" pattern=".{1,}" required>
<label for="input-search">Search</label>
</div> <!-- /field -->
</form>
</div>
xxxxxxxxxx
$font-family: sans-serif;
$font-size: 1em;
$font-weight: 400;
$line-height: 1.5em;
$color: #282828;
$color-bg: #d8d6d8;
$color-border: #dfdfdf;
$color-placeholder: #b2b2b2;
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background-color: $color-bg;
color: $color;
font: $font-weight #{$font-size}/#{$line-height} $font-family;
margin: 0;
}
.container {
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
}
.search {
width: 24em;
.field {
position: relative;
}
label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: $color-placeholder;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
transition: left .4s, transform .4s;
padding-left: 1.25em;
}
.input-search {
border: 1px solid $color-border;
border-radius: .25em;
box-shadow: 0 1px 0 #bfbebf;
display: block;
font: $font-weight #{$font-size}/#{$line-height} $font-family;
padding: .5em 1.75em;
width: 100%;
&:focus,
&:valid {
&+ label {
left: .5em;
transform: translate(0, -50%);
}
}
&:valid {
&+ label {
text-indent: -9999px;
}
}
}
}