Skip to content

Instantly share code, notes, and snippets.

@elwint
Last active July 26, 2023 11:50
Show Gist options
  • Save elwint/1f5510c97707ba4de163768cdb177436 to your computer and use it in GitHub Desktop.
Save elwint/1f5510c97707ba4de163768cdb177436 to your computer and use it in GitHub Desktop.
Expanding Search Bar/Box CSS only (no JS)
/* Free to use for everyone */
/* Example: http://codepen.io/elwint/pen/vGMRaB */
body {
font-family: sans-serif;
background-color: #111;
}
.button {
display: inline-block;
margin: 4px 2px;
background-color: #444;
font-size: 14px;
padding-left: 32px;
padding-right: 32px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button:hover {
transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
background-color: white;
color: black;
}
.search-container {
position: relative;
display: inline-block;
margin: 4px 2px;
height: 50px;
width: 50px;
vertical-align: bottom;
}
.mglass {
display: inline-block;
pointer-events: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.searchbutton {
position: absolute;
font-size: 22px;
width: 100%;
margin: 0;
padding: 0;
}
.search:focus + .searchbutton {
transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
background-color: white;
color: black;
}
.search {
position: absolute;
left: 49px; /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */
background-color: white;
outline: none;
border: none;
padding: 0;
width: 0;
height: 100%;
z-index: 10;
transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}
.search:focus {
width: 363px; /* Bar width+1px */
padding: 0 16px 0 0;
}
.expandright {
left: auto;
right: 49px; /* Button width-1px */
}
.expandright:focus {
padding: 0 0 0 16px;
}
@elwint
Copy link
Author

elwint commented May 14, 2016

An example with html can be found here: http://codepen.io/elwint/pen/vGMRaB

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment