Skip to content

Instantly share code, notes, and snippets.

@eskimoblood

eskimoblood/jsbin.igIHeYe.css

Created November 19, 2013 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eskimoblood/7545737 to your computer and use it in GitHub Desktop.
Save eskimoblood/7545737 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.igIHeYe.css
div input, div label{
margin: 0;
position:relative;
left: -200px;
transition: .3s;
box-sizing:border-box;
float:left;
height: 30px
}
input{
width: 170px;
}
div{
width: 400px;
}
label{
width: 30px;
height: 30px;
background: lime;
}
label:nth-child(2){
background: red
}
#quote:focus + label,
#quote:focus + label + label,
#quote:focus + label + label + input,
#quote:focus{
left: 0;
}
form{
position: relative;
overflow: hidden;
width: 200px
}
Raw
jsbin.igIHeYe.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form action="">
<div >
<input type="time" value="00:00:00" id="quote" step=1>
<label for="time"></label>
<label for="quote"></label>
<input id="time">
</div>
</form>
</body>
</html>
Raw
jsbin.igIHeYe.js
$('#quote').focusout(function(){$('#time')[0].focus()})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment