Which I got from here: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/ - great site by the way!
It really looks and works great, but I just felt that it was way too much for something as simple as a search bar that expands.
At first I thought I could just rework the code I found on Tympanus, but eventually I just re-did it all. This is really not going to be a long post, I'm just going to show you the code.
This is all the HTML you'll need, notice that there's no hint of JavaScript anywhere:
<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>
And here's the CSS:
body, html {This is what it ended up looking like:
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('../images/search-icon-box-blue.png');
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%;
}
There's a couple of things that are happening in the CSS. The important things to watch out for is that the placeholder text as well as any text you typed in, is set to transparent when the input is not expanded, this is so that the text does not show up over the search icon. The text is made visible on focus or hover.
Pretty cool... There's lots of little things that can be added, but this is a good basis for me to work from.
Here's a CodePen.io link if you want to play around with the code a bit and see how it works. This version has a snippet of plain JavaScript to launch a form submit when the input box is clicked on when there's text present: http://codepen.io/anon/pen/tEBnw
Hope it helps someone!
