Clickable Icon in search bar

[Vernier]

Hi guys,

How would I go about adding a clickable icon which submits the form to a search bar? The outcome I am ideally looking for is this: http://prntscr.com/mp5wj

Thanks :)

[Beverleyh]

What do you mean exactly?

Are you simply wanting to change a 'standard' HTML form's submit button into an image icon - button only? (http://www.10sharpdesign.com/accessibility/forms/6-button-submit.html)

Or do you want to know how to use images/CSS to totally customise the look of a 'standard' HTML form - text field and submit button?

Maybe something here will help: http://speckyboy.com/2012/02/15/how-to-build-a-stylish-css3-search-box/ or http://speckyboy.com/2009/07/02/20-resources-and-tutorials-for-creative-forms-using-css/

[Vernier]

Hi, thanks for the reply :)

I basically want the magnifying glass icon in http://prntscr.com/mp5wj to be clickable so that once it's clicked it will submit the form but I want it where it currently is. I've currently got the magnifying glass as a background image. Here's a snippet of the html and the css:


<input type="text" class="textbox search_box" name="keywords" value="Search..." onfocus="Clear(this);"/>


.search_box {
font-style: italic;
background: #000 url(images/themes/v1/search_icon.png) right no-repeat !important;
color: #fff !important;
padding-right: 17px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 10px !important;
float: right;
}

Thanks very much :)

[Beverleyh]

OK - I'd do it like this;

1 - create a background image of the search bar/field - just the blue border and black text field (no magnifying glass)
2 - create a seperate magnify glass icon image

With this CSS;
#search-bar { width:175px; height:29px; background:#000 url('search-bar.png') 0 0 no-repeat; }
#search .field { float:left; margin:5px 0 0 8px; font:8pt Verdana; color:#fff; font-style:italic; width:130px; height:16px; background:#000; border:0; }
#search .button { float:right; margin:7px 7px 0 0; }And this HTML;
<div id="search-bar">
<form id="search">
<input type="text" class="field" name="searchterm" maxlength="30" value="Search..." /><input type="image" class="button" name="search" src="search-button.png" title="Search..." />
</form>
</div>You should get something like this: http://fofwebdesign.co.uk/template/_testing/search-bar/search-bar.htm

Tested in IE7/8/9, Firefox, Chrome, Safari, Opera

[ajfmrf]

Is this what you are looking for

http://www.web-user.info/test/searchform.html

[Beverleyh]

I also added a bit of extra styling for IE only (to make the text sit more centrally on the vertical);
<!--[if IE]><style type="text/css">#search .field { padding-top:2px; }</style><![endif]-->

[Vernier]

Thanks guys! I managed to get it working perfectly using Beverleyh's method. Thanks a bunch guys :)

[Beverleyh]

No problem. Glad it made sense :)

[Beverleyh]

Just to let you know that when I tested my previous Search Bar example on MAC, I noticed that the vertical allignment wasn't too great.

Please note the changes I made below (in red);
#search-bar { width:175px; height:29px; background:#000 url('search-bar.png') 0 0 no-repeat; }
#search .field { float:left; margin:5px 0 0 8px; font:8pt Verdana; color:#fff; font-style:italic; width:130px; height:20px; line-height:18px; padding:0; background:#000; border:0; }
#search .button { float:right; margin:7px 7px 0 0; }And the IE specific styling;
<!--[if IE]><style type="text/css">#search .field { height:18px; }</style><![endif]-->The main thing I forgot yesterday was to zero out the padding on the form text field - browsers have their own default paddings so this was causing some descrepancies with the text field height, and therefore vertical text alignment, before we'd even got started (Doh!)

Then, to correct the height reduction caused by the removal of padding, I increased the height to from 16px to 20px. This fixed things in browsers on Windows, but sadly not on MAC.

The line-height doesn't appear to have any effect in any major browsers in Windows in this example, but on MAC it does, so I set the line-height to 18px, a bit smaller than the height of 20px, to make the text sit higher, so improving vertical alignment on MAC too.

Of course IE still wants to do its own thing so I set its specific text field height to 18px there to visually match things up across all browsers as best as possible.