need to create search textbox

[gib65]

http://www.htmlforums.com/html-xhtml/t-need-to-create-search-textbox-162127.html#post857992

Hello,

I'm trying to create a search textbox. It should contain a spyglass icon inside the textbox aligned to the right. It needs to conform to the following criteria:

* the spyglass needs to be clickable with a customizable javascript handler to handle the click event.
* When the user enters text into the textbox, it should not overlap with the spyglass.
* There should be no X to the right of the textbox. Some textboxes have an X to the right which clears the text if clicked. I don't want this.
* It should work in at least IE and Chrome.

Can someone help me with this? Thank you.

[Beverleyh]

How about approaching it like this;

- start with a text input field, styled to make it invisible (no border, etc)
- put your submit button alongside with an image or CSS icon http://www.lets-develop.com/html5-html-css-css3-php-wordpress-jquery-javascript-photoshop-illustrator-flash-tutorial/html-html5-html-5/use-custom-image-instead-of-submit-button/ you should be able to attach whatever handler you like to it
- wrap them in a div and style that to look like a text box
- as for removing the "x", this should help http://geektnt.com/how-to-remove-x-from-search-input-field-on-chrome-and-ie.html

[molendijk]

Something like this?
<form style="position: relative; display: inline; " action="http://your_search_engin.html" method="get" accept-charset="utf-8" onsubmit="your_submit_function()">
<input type="text" size="10" style="font-family: arial; font-size: 13px; position: relative; top: 0px; background: white; border: 1px solid silver; margin-left: 25px; width: 200px; height: 30px; padding-right: 25px" onclick="reset()">
<input type="image" style="position: relative; width:35px; top: 11px; margin-left: -35px; background: transparent; opacity: 0.5" src="http://cdn5.iconfinder.com/data/icons/glyph_set/128/search.png" name="submit" alt="click to search">
</form>

[gib65]

Thank both,

I followed these techniques and it works.