Skip to content

Instantly share code, notes, and snippets.

@TheSisb
Created December 13, 2012 23:56
Show Gist options
  • Save TheSisb/4281236 to your computer and use it in GitHub Desktop.
Save TheSisb/4281236 to your computer and use it in GitHub Desktop.
A CodePen by Joshua Hibbert. Focused Input Trick - Works in IE8! Also, please keep in mind that this is just a demonstration of an interaction, and the actual usability is questionable (in this case).
<input id="search" type="search">
<label for="search">Search</label>
body {
background-color: #ddd;
color: #222;
font: 100%/1.5 sans-serif;
padding: 3em;
}
label {
background-color: #fc6;
border: .125em solid #222;
cursor: pointer;
display: inline-block;
font-size: 1.5em;
font-weight: bold;
height: 2em; /* Required for IE */
line-height: 2;
margin-left: -.125em;
padding: 0 1em;
text-transform: uppercase;
transition: .25s;
vertical-align: top;
}
label:hover,
label:focus {
background-color: #fa3;
}
input {
border: .1875em solid #222;
color: #222;
display: inline-block;
font: 1em/1.5 sans-serif; /* Firefox, Opera, and IE don't respect the line-height of input elements, instead using the normal value (i.e. between 1 and 1.2, but it varies depending on the typeface) */
height: 1.5em; /* Required for Firefox, Opera, and IE */
margin-right: -.25em;
outline: 0;
opacity: 0;
padding: .75em 0;
transition: .25s;
width: 0;
vertical-align: top;
}
input:focus {
opacity: 1;
padding-left: .75em;
padding-right: .75em;
width: 18em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment