Skip to content

Instantly share code, notes, and snippets.

@dmitrylebedev

dmitrylebedev/Input-label.html

Last active July 29, 2016 07:53
Show Gist options
  • Save dmitrylebedev/1a9c57a66aff65ebabdf to your computer and use it in GitHub Desktop.
Save dmitrylebedev/1a9c57a66aff65ebabdf to your computer and use it in GitHub Desktop.
Download ZIP
CSS Animated Input Label
Raw
Input-label.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<style>
body {
padding: 40px;
font-family: "Helvetica Neue";
}
.input-wrapper {
position: relative;
display: inline-block;
verical-align: baseline;
line-height: 14px;
margin: 0 10px;
}
label {
position: absolute;
top: 14px;
left: 20px;
padding: 0 2px;
color: #bbb;
font-size: 11px;
text-transform: uppercase;
z-index: 2;
pointer-events: none;
background: #fff;
transition: transform 200ms ease;
transform: translateY(-20px);
}
label:before {
content: attr(data-first);
white-space: nowrap;
}
input {
position: relative;
padding: 10px 20px 12px 20px;
width: 300px;
font-size: 13px;
color: #555;
outline: none;
border: 1px solid #bbb;
border-radius: 20px;
}
input:invalid + label {
transform: translateY(0);
}
input:focus + label {
transform: translateY(-20px);
}
input:focus + label:before {
content: attr(data-second);
border-color: #2b96f1;
color: #2b96f1;
}
input:required:invalid + label[data-first][data-second]:before {
content: attr(data-first);
}
input:required:focus + label[data-first][data-second]:before {
content: attr(data-second);
}
input:required + label[data-second]:before {
content: attr(data-second);
}
</style>
<div class="input-wrapper">
<input type="text" id="user" required>
<label data-first="Владелец карты (имя и фамилия с карты)" data-second="Владелец карты"></label>
</div>
<details>
<a href="http://codepen.io/dmitrylebedev/pen/bEQKoP">Demo</a>
</details>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment