Skip to content

Instantly share code, notes, and snippets.

@simsam7

simsam7/gist:ea94df65832803955a30

Last active August 29, 2015 14:01
Show Gist options
  • Save simsam7/ea94df65832803955a30 to your computer and use it in GitHub Desktop.
Save simsam7/ea94df65832803955a30 to your computer and use it in GitHub Desktop.
Download ZIP
Expanding Search Bar Using Only CSS
Raw
gistfile1.html
<!-- I needed an expanding search bar that was not heavily dependant on JavaScript to work, so I came up with this -->
<!DOCTYPE html>
<html>
<head>
<title>Expanding Search Bar CSS Only</title>
<link href="css/style.css" rel="Stylesheet"></link>
</head>
<body>
<h1>Expanding Search Bar CSS Only</h1>
<div id="search-bar">
<form id="search-form">
<input autocomplete="off" class="search-field" id="search-text" name="search" placeholder="Search…" type="text" />
<input style="display: none;" type="submit" value="" />
</form>
</div>
</body>
</html>
Raw
gistfile2.css
body, html {
background: #285e8e;
color: #252525;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 18px;
}
h1 {
color: #fff;
margin-left: 20px;
}
input::-webkit-input-placeholder { color:transparent; }
input::-moz-placeholder { color:transparent; }
input:-ms-input-placeholder { color:transparent; }
input::placeholder { color:transparent; }
input:focus::-webkit-input-placeholder { color: #ccc; }
input:focus:-moz-placeholder { color: #ccc; }
input:focus::-moz-placeholder { color: #ccc; }
input:focus:placeholder { color:#ccc; }
input:hover::-webkit-input-placeholder { color: #ccc; }
input:hover:-moz-placeholder { color: #ccc; }
input:hover::-moz-placeholder { color: #ccc; }
input:hover:placeholder { color:#ccc; }
#search-button-1 {
position: absolute;
float: right;
right: 0px;
display: block;
width: 52px;
height: 53px;
background-color: #eb9316;
}
/** Search Fields **/
.search-field {
float: right;
display: block;
width: 52px;
padding: 10px 10px;
background-color: #fff;
background-image: url('http://snag.gy/n8Yty.jpg');
background-repeat: no-repeat;
background-position:right;
font-size: 22px;
border: 0px solid #fff;
color: rgba(255, 255, 255, 0);
/* CSS3 Box Sizing */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 Rounded Corners */
border-radius: 2px;
/* CSS3 Transition (Expanding Effect) */
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-backface-visibility: hidden;
}
/** Search Field 1 Focus (Full Width) **/
.search-field:focus, .search-field:hover {
outline: none;
min-width: 200px;
max-width: 500px;
width: 40%;
color: #777;
/* CSS3 Outer Shadow */
-webkit-box-shadow: 0 0 0 2px #999;
-moz-box-shadow: 0 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
/** Don't want the reset auto-button to show up over the button image **/
.search-field::-ms-clear {
width : 0;
height: 0;
}
/** Make text visible again on focus or hover **/
#search-text:focus, #search-text:hover {
color: #777;
}
#search-bar {
margin-right: 40%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment