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!
Hi. I am trying to implement this nice search-box button on Blogger, but I can not do it. The search function it does not work. Besides, it has some other problems, that refer to action when I click over the magnifiying glass icon. Can you help me? Thank you very much, in advance.
ReplyDeleteHi Juan, I wouldn't try doing something like this in Blogger.
DeleteThe search box will probably show up like it should, but attaching other code to it so that you can actually execute a search, would be best done on another platform or your own hosting environment, not Blogger.
This was just a starting point for me, I also attached a drop-down with auto-complete to it & basically I just attached an event listener to the magnifying glass image. Clicking/tapping on the image without any text being present, makes the search box appear & clicking on it or hitting enter with text present sends off an Ajax request.
First try to make your code work in your own development environment, then maybe tackle making it work in Blogger, but I wouldn't even go there.
Good luck!
Sam
Ok, Sam. Thank you so much for your reply.
ReplyDeleteThank you very much. This works 100%.
ReplyDeleteGlad it worked for you shtml54!
ReplyDelete