What code to add this jpg into the search box please?

[ausdigitalmedia]

Hi all.

With this site www.thewattletree.com

 

I'd like to add this image http://www.thewattletree.com/Search_Glass.jpg on top of the existing search box background and to the right and have it function as a "enter" button when pressed.

The same as this site.

http://downthatlittlelane.com.au/

 

Can anyone help?

 

 

 

 

[cyber_alchemist]

whether you use a button  with a <button> tag or a submit button using <input type="submit" class="submit">

 

resize the element with css and add a background such as:

.submit {
background: url(http://www.thewattletree.com/Search_Glass.jpg) no-repeat;
width: 30px;
height: 30px;
border-radius: 2px;
border-color: #888181; 
}
/* change the color and sizes and class according to your needs, you could also give a rounded edge , i have given of 2px.

hope it helped 

 

 

You could take example from this sites search box as well 

#search .submit_input {
background: #7ba60d url(http://forums.phpfreaks.com/public/style_images/phpfreaks/search_icon.png) no-repeat 50%;
text-indent: -3000em;
padding: 0;
border: 0;
border: 1px solid #7ba60d;
display: block;
width: 26px;
height: 26px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-radius: 0 3px 3px 0;
-webkit-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
}

its html tag is:

<input type="submit" class="submit_input clickable" value="">

Edited October 18, 2013 by cyber_alchemist

[cyber_alchemist]

Hi all.

With this site www.thewattletree.com

 

I'd like to add this image http://www.thewattletree.com/Search_Glass.jpg on top of the existing search box background and to the right and have it function as a "enter" button when pressed.

The same as this site.

http://downthatlittlelane.com.au/

 

Can anyone help?

 

also the link you have given has <div class="row> </div>surrounding the search box(<input type="text" />) and the search button (<input type="submit" />) ... 

the division as you could see below , has background of  a search box... but the real search box hides in the colors..

search .row {
background: url(/images/search.jpg) no-repeat;
width: 181px;
height: 21px;
overflow: hidden;
padding: 5px 43px 5px 11px;
}

the search box has no background for this:

 

<input type="text" class="search" />

search input.text {
float: left;
padding: 2px 0;
margin: 0;
border: 0;
width: 155px;
background: none;
line-height: normal;}