Jump to content


Photo

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


  • Please log in to reply
2 replies to this topic

#1 ausdigitalmedia

ausdigitalmedia

    Member

  • Members
  • PipPip
  • 17 posts

Posted 16 October 2013 - 07:18 PM

Hi all.

With this site www.thewattletree.com

 

I'd like to add this image http://www.thewattle...earch_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?

 

 

 

 



#2 cyber_alchemist

cyber_alchemist

    Advanced Member

  • Members
  • PipPipPip
  • 56 posts

Posted 18 October 2013 - 01:06 AM

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  :pirate:

#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 by cyber_alchemist, 18 October 2013 - 01:11 AM.


#3 cyber_alchemist

cyber_alchemist

    Advanced Member

  • Members
  • PipPipPip
  • 56 posts

Posted 18 October 2013 - 01:38 AM

Hi all.

With this site www.thewattletree.com

 

I'd like to add this image http://www.thewattle...earch_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;}





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com