How can I show a YUI split button with an icon?

I am using some YUI split buttons in an app and now I would like to show an arbitrary small icon on the left side of the button. I followed the example CSS for the regular YUI push buttons and I can see my icon, but the little splitter image then disappears. The button seems to behave as though the splitter is there, even though the vertical bar and dropdown icon are not present. This seems to be because the split button also uses a CSS background image url. So, what's the best way to show my own icon over a YUI split button?

Here's my example code.

CSS:

.yui-button#splitbutton1 button,
.yui-button#regularbutton button
{
  padding-left: 2em;
  background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 0.5em     50% no-repeat;
}

HTML:

<div>
  <input type="button" id="regularbutton" value="My regular button">
</div>

<div>
  <input type="button" id="splitbutton1" value="My first split button">    
  <select id="splitbutton1menu">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

<div>
  <input type="button" id="splitbutton2" value="My other split button">    
  <select id="splitbutton2menu">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Script:

YAHOO.util.Event.onContentReady("container", function () {
    var button = new YAHOO.widget.Button("regularbutton");
    var splitbutton = new YAHOO.widget.Button("splitbutton1",
                          {
                              type: "split",
                              menu: "splitbutton1menu"
                          } );
    var splitbutton = new YAHOO.widget.Button("splitbutton2",
                          {
                            开发者_如何学Go  type: "split",
                              menu: "splitbutton2menu"
                          } );


});

change your css to look like this:

.yui-button#splitbutton1 span,
.yui-button#regularbutton span
{
  padding-left: 20px;
  background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 0.5em     50% no-repeat;
}

You are right, the button has already a background image. So all we have to do, is place the bg image a little bit higher, so we will target the span that wraps the button

here to see the demo http://jsfiddle.net/gmedina/Bvhpm/5/

Edit: In fact, if you want to apply your icon to all of the split buttons, I'd replace the css above in favor of this:

.yui-split-button span {
   padding-left: 20px;
   background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 0.5em 50% no-repeat;        
}