A New Search Box for Blogger

I think it's time to switch to a different search box. I am posting the before and after pictures side by side to show you what I've done different.



For the search image, I made three separate bitmaps. Since this is going to be a an entry field with four curved corners, I took cross sections of the top and bottom of the image and separately brought them into the program through CSS's background-image function.

You'll notice that the top section (btop.jpg) is longer in depth than what you see on screen. This is because you want to make sure that things aren't going to get broken and look ugly if someone enlarges the text size.

btop.jpg

bcurve.jpg

bluearrow.jpg

My changes start in the HTML cause I need to nest two div's in order to lay out the top and bottom of the search entry image. The display of the arrow button is simple - I replace the old button image which was a gingerbread cookie with the new arrow.

HTML changes:

<div class='n2'>
<div class='n1'>
<form action='/search' id='searchthis' method='get' style='DISPLAY: inline'>
<input id='sbox' name='q' size='16'/>
<input id='sbutton' src='http://www.cssrule.com/pics/bluearrow.jpg' type='image'/> 
</form>
</div>
</div>

CSS changes along with self-explanatory comments:

#sbutton {
margin-top: 5px;

/*sbutton is staticly positioned which means it is part of the normal flow.
by declaring its position property as relative, I move the origin/reference
point to sbutton's upper left corner. This way I can easily move
sbutton around by nudging it a few pixels in the direction I want.
*/
position: relative;

/* move the button down by 4 pixels and shift it to the right by 1 pixels*/
top:4px;
left: 1px;
}
#sbox { margin-top: 2px; }

/*change the default border color (grey) for input element to a light blue
to match the rest of the image colors*/
input#sbox { border: 1px solid #b4d1dc; }

.n2 {
background: url('http://www.cssrule.com/pics/btop.jpg') no-repeat 0 0;
text-align: center;
}

.n1 {
background:url('http://www.cssrule.com/pics/bcurve.jpg') no-repeat 0 100%;
height: 32px;
padding-top: 2px;
padding-bottom: 4px;
}

If you want to increase the blue area vertically and make the search box thicker, add more pixels to n1's height.

2013 Note: border-radius, the new CSS3 property makes this approach obsolete. Instead of using multiple bitmaps as background images, we simply set a background color of light blue, give it a border radius of 5 and outline it with a thin line. Also delete the two background images that go with the divs.

background-color: #c8dff8;
border: 1px solid #83adbd;
border-radius: 5px;