<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Playing around with floating labels</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="input_wrap">
<input type="text" id="email" placeholder="
[email protected]" data-inp="0" />
<label for="email">e-mail</label>
</div>
<div class="input_wrap">
<input type="text" id="user" placeholder="feline_overlord" data-inp="1" />
<label for="user">username</label>
</div>
<div class="input_wrap">
<input type="text" id="passkey" placeholder="fish catnip boxes foil" data-inp="2" />
<label for="passkey">password</label>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
background: HSL(215, 21%, 24%);
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 0.1em;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.input_wrap {
position: relative;
width: 20rem;
margin: 3em auto 1em;
}
.input_wrap:first-child {
margin-top: 6em;
}
input + label {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 35%;
padding-left: 0.75em;
padding-right: 0.75em;
background: HSL(320, 69%, 53%);
color: white;
line-height: 2.5rem;
text-transform: uppercase;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
input {
height: 2.5rem;
width: 100%;
padding-left: 38%;
color: HSL(215, 21%, 24%);
border: 1px solid HSL(320, 69%, 53%);
-webkit-transition: padding-left 0.3s ease;
transition: padding-left 0.3s ease;
}
input:focus + label,
.has_value {
background: transparent;
color: HSL(90, 44%, 71%);
-webkit-transform: translate(-1.5em, -2.25em) scale(0.75);
transform: translate(-1.5em, -2.25em) scale(0.75);
}
input:focus,
.inp_hasvalue {
padding-left: 0.3em;
background: transparent;
color: white;
border-color: HSL(90, 44%, 71%);
outline: none;
}
var label = document.getElementsByTagName('label');
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('blur', function(e) {
hasValue(e.target);
});
}
function hasValue(el) {
// if there is input and label does not have has_value class, keep the label floated
// get position of input element
var inpPos = el.getAttribute('data-inp');
if (el.value.trim() && label[inpPos].className.indexOf('has_value') < 0) {
label[inpPos].className += 'has_value';
el.className += 'inp_hasvalue';
}
// if input has no value, remove has_value class to return label to its initial position
if (!el.value.trim()) {
label[inpPos].className = label[inpPos].className.replace(/has_value/, '');
el.className = el.className.replace(/inp_hasvalue/, '');
}
}