Skip to content

Instantly share code, notes, and snippets.

@ajaswa

ajaswa/index.html

Last active December 17, 2015 08:18
Show Gist options
  • Save ajaswa/5579086 to your computer and use it in GitHub Desktop.
Save ajaswa/5579086 to your computer and use it in GitHub Desktop.
Download ZIP
Sweet sliding search in css
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="search-bar.css">
</head>
<body>
<form id='search'>
<input type='text' />
<button>
<img src='http://www.fillmurray.com/32/32' />
</button>
</form>
</body>
</html>
Raw
search-bar.css
#search {
border: 0px solid grey;
display: inline-block;
height: 36px;
vertical-align: top;
position: absolute;
right: 0;
top: 0;
width: 340px;
overflow: hidden;
text-align: right;
}
#search input {
text-align: left;
height: 36px;
margin: 0;
}
#search input[type="text"] {
-webkit-transition: width .6s linear;
-moz-transition: width .6s linear;
-ms-transition: width .6s linear;
-o-transition: width .6s linear;
transition: width .6s linear;
position: absolute;
right: 0;
top: 0;
display: inline-block;
font-size: 20px;
border: 0;
width: 32px;
background-color: transparent;
color: transparent;
cursor: pointer;
z-index: 100;
}
#search input:focus {
cursor: text;
color: grey;
right: 32px;
width: 308px;
background-color: white;
outline: 0;
border: 2px solid grey;
border-right-width: 1px;
}
#search input:focus + button {
border: 2px solid grey;
border-left-width: 1px;
position: relative;
z-index: 200;
}
#search button {
padding: 0;
display: inline-block;
vertical-align: top;
height: 36px;
width: 32px;
border: 2px solid transparent;
border-left-width: 1px;
}
#search button:active {
position: relative;
z-index: 200;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment