How to add icon in textbox

Probably, most common place where you can use this trick is a toolbar for some site with search capability. Sure, that it will be nice to have search box on your toolbar like this:




I've found two different ways how to do this. The first way is to use XBL to define new component. It can be quite complicated for those developers who has no previous experience with it. Fortunately, there is another way which is more simple.

  <textbox id="TB-Search"
    minwidth="200" width="200"
    onfocus="tb.searchBoxFocus(this);"
    onblur="tb.searchBoxBlur(this);"
    onkeypress="tb.keyHandler(event);"
  >
    <image id="TB-SearchImage"/>
  </textbox>

CSS definition for search image:

#TB-SearchImage {
  list-style-image: url("http://yoursite.com/favicon.ico");
  padding-right: 2px;
  padding-left: 0px;
  margin: 0px;
  border: 0px;
}

That's it!