I’ve stumbled upon an article by Natalie Jost on how to make your search bar look pretty. I forgot the exact title of the post. This was almost a year two years ago, I think. Now, I have a hard time searching the original post since she moved to Tumblr. ;( Anyway, do you want your search bar to look like mine? ;)

Or do you want it in a different color? Pastel pink perhaps?

Open your searchform.php file. Replace all the code there with this one.

<div class="searchtitle">
   <div class="scatter_box_fixed-background">
    <div class="scatter_box_fixed-border1">
        <div class="scatter_box_fixed-border2">
            <div class="scatter_box_fixed-content">

<form id="searchform" method="get" action="<?php bloginfo('home'); ?>/"> 
<input type="text" value="enter keywords here" onfocus="if (this.value == 'enter keywords here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter keywords here';}" size="20" maxlength="100" name="s" id="s" /> </form>
	        </div>
            </div>
      </div>
   </div>
</div>

Then place this in your css file. ♥ It’s that easy.

.searchtitle{
margin-left:7px;
margin-bottom:20px;
}

.scatter_box_fixed-background {
background:#C6E5D9;
height:35px;
width:160px;
text-align:center;
}

.scatter_box_fixed-border1 {
border-left:1px dashed #434034;
border-top:1px dashed #434034;
height:35px;
left:1px;
position:relative;
top:-3px;
width:158px;
}

.scatter_box_fixed-border2 {
border-bottom:1px dashed #434034;
border-right:1px dashed #434034;
height:35px;
left:3px;
position:relative;
top:-1px;
width:158px;
}

.scatter_box_fixed-content {
display:block;
left:0;
line-height:1.4;
padding:2px 0 0 10px;
position:relative;
text-align:left;
top:5px;
}

UPDATED: 11/27/11 I found a way on how this can be used on Blogger. :)

Go to Page Elements >> Add a Gadget >> HTML/ Javascript. Done? Copy paste this code and then save. Recheck this code if it’s complete because Blogger has the annoying habit of deleting codes on HTML/Javascript boxes.

<div class="searchtitle">
   <div class="scatter_box_fixed-background">
    <div class="scatter_box_fixed-border1">
        <div class="scatter_box_fixed-border2">
            <div class="scatter_box_fixed-content">

<form id="searchform" method="get" action="/search">
<input type="text" class="searchinput" value="enter keywords here" onfocus="if (this.value == 'enter keywords here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter keywords here';}" size="20" maxlength="100" name="q" id="s" /> </form>
	        </div>
            </div>
      </div>
   </div>
</div>

For the CSS, go to EDIT HTML and paste this code just before the closing head.

.searchtitle{
margin-left:7px;
margin-bottom:20px;
}

.scatter_box_fixed-background {
background:#FDF2F0;
height:35px;
width:160px;
text-align:center;
}

.scatter_box_fixed-border1 {
border-left:1px dashed #434034;
border-top:1px dashed #434034;
height:35px;
left:1px;
position:relative;
top:-3px;
width:158px;
}

.scatter_box_fixed-border2 {
border-bottom:1px dashed #434034;
border-right:1px dashed #434034;
height:35px;
left:3px;
position:relative;
top:-1px;
width:158px;
}

.scatter_box_fixed-content {
display:block;
left:0;
line-height:1.4;
padding:2px 0 0 5px;
position:relative;
text-align:left;
top:5px;
}

.searchinput {
background-color: transparent;
border:none;
padding: 0;
margin:0;
outline: none;
}

Just let me know if you have any problems with it. ;)

**This post was originally published on this blog last Nov. 24, 2011.