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!

How to add images to menuitem in button.

Lets assume that we have button with menupopup:

<button type="menu" label="Main">
  <menupopup>
    <menuitem id="miHomeId" label="Home Page"/>
    <menuitem id="miAboutId" label="About"/>
    <menuitem id="miContactId" label="Contact"/>
  </menupopup>
</button>

It will look something like this:



And we need to add different icons to each menuitem. The first idea is to use list-style-image attribute.

#miHomeId {
  list-style-image: url("chrome://toolbar/skin/Home.PNG");
}

It is really strange, but it doesn't work. I've tried to find some examples where this problem is solved. But I have found nothing. So, I've found one interesting workaround:

<button type="menu" label="Main">
  <menupopup>
    <menuitem id="miHomeId">
      <img src="chrome://toolbar/skin/Home.PNG" id="imgHomeId"/>
      <label value="Home Page"/>
    </menuitem>
    <menuitem id="miAboutId">
      <img src="chrome://toolbar/skin/About.PNG" id="imgAboutId"/>
      <label value="About"/>
    </menuitem>
    <menuitem id="miContactId">
      <img src="chrome://toolbar/skin/Contact.PNG" id="imgContactId"/>
      <label value="Contact"/>
    </menuitem>
  </menupopup>
</button>

And you just need to specify your images in CSS:

#imgHomeId {
  list-style-image: url("chrome://toolbar/skin/Home.PNG");
}
#imgAboutId {
  list-style-image: url("chrome://toolbar/skin/About.PNG");
}  
#imgContactId {
  list-style-image: url("chrome://toolbar/skin/Contact.PNG");
}

Here is the result: