Skip to content

Instantly share code, notes, and snippets.

@rjschie

rjschie/Input Focus Animation.html

Last active September 28, 2015 01:14
Show Gist options
  • Save rjschie/c9fda6d4040fae4ae51f to your computer and use it in GitHub Desktop.
Save rjschie/c9fda6d4040fae4ae51f to your computer and use it in GitHub Desktop.
Download ZIP
Saw this on Bungie's website, and wanted to give it a go using only CSS. http://jsfiddle.net/rjschie/7rL3429z/
Raw
Input Focus Animation.html
<!DOCTYPE html>
<html>
<head>
<title>Input Focus Animation</title>
<style>
html,body {
padding: 0;
margin: 0;
height: 100%;
}
body, input {
font-family: sans-serif;
font-weight: 100;
font-size: 16px;
}
.form {
height: 100%;
padding: 2rem;
background: teal;
}
.input-group__field, .input-group__text {
transition: all .1s ease-out;
}
.input-group {
background-color: #eee;
height: 5rem;
position: relative;
color: black;
max-width: 600px;
}
.input-group__field {
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
padding: 20px 10px;
border: none;
outline: none;
}
.input-group__field:focus, .input-group__field:valid {
transform: translate(10px, 2rem);
width: 80%;
height: 1rem;
border: 1px solid #ccc;
}
.input-group__text {
position: absolute;
top: 1.75rem;
left: 40px;
z-index: 101;
font-size: 1.5rem;
cursor: text;
}
.input-group__field:focus + .input-group__text, .input-group__field:valid + .input-group__text {
top: 10px;
left: 10px;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="form">
<div class="input-group">
<input id="search" name="search" class="input-group__field" required>
<label for="search" class="input-group__text">Search:</label>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment