Search Bar

[johnnyboy16]

Hey Everyone,

 

I need some help with a search bar I'm working on. 

 

I am trying to make it so it will highlight the entire field, essentially looking like the first image attached.  But, after working on it for a while, I can't figure out another solution besides the one below, which looks like my second image attached. 

 

 

<form name="searchFrm" method="get" style="margin:0px" action="search.php"> <!-- search form start -->

<div class="search-bgimg" id="search-bgimg">

<div class="searchboxinput">

<input type="text" name="search" id="searchtext" class="inputsearchbox" value="search..." 

onfocus="if(this.value =='search...'){this.value='';};chbgimg(1);"      onblur="if(this.value=='')this.value='search...';chbgimg(0);">

</div>

</div>

</form>  <!-- end of search form -->

 

 

 

.search

{

width:220px;

float:right;

margin-right:0px;

}

.searchtxt

{

padding:7px 0px 0px 0px;

float:right;

font-size:14px;

font-weight: 400;

color:#717070;

}

 

.searchtxt a:hover

{

text-decoration: underline;

}

.search-bgimg

{

background-image:  url('../image/searchbox-bgimg.png');

margin-top:10px;

padding:3px 3px 0 0px;

float:right;

width:216px;

height:25px;

}

.searchboximg

{

margin: 0px 0px 0px 1px;

    height:19px;

width:28px;

float:left;

padding-top:1px;

padding-left:3px

}

.searchboxinput

{

    position:absolute;

    margin: 2px 0px 0px 25px;

}

 

.inputsearchbox

{

height:15px;

width:186px;

    font-size:14px;

    font-weight: 300;

border: 0px solid #717070;

}

 

[attachment deleted by admin]

[JasonLewis]

Why not just give the input box a background, then a left padding of your background width to shift the text off the image.