Как я могу показать кнопку разделения YUI со значком?

Question

Я использую несколько кнопок YUI для разделения в приложении, и теперь я хотел бы показать произвольный маленький значок в левой части кнопки.Я следовал примеру CSS для обычных кнопок YUI , и я вижу свою иконку, но изображение маленького сплиттера исчезает.Кажется, кнопка ведет себя так, как будто сплиттер есть, хотя вертикальной полосы и значка выпадающего меню нет.Это происходит потому, что кнопка разделения также использует URL-адрес фонового изображения CSS.Итак, как лучше всего показать мой собственный значок над кнопкой разделения YUI?

Вот мой пример кода.

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>

Сценарий:

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",
                          {
                              type: "split",
                              menu: "splitbutton2menu"
                          } );


});

Answer 1

измени свой CSS, чтобы он выглядел так:

.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;
}

Вы правы, кнопка уже имеет фоновое изображение. Поэтому все, что нам нужно сделать, это поместить изображение bg немного выше, чтобы мы нацелились на span, который оборачивает кнопку

здесь, чтобы увидеть демо http://jsfiddle.net/gmedina/Bvhpm/5/

Edit: На самом деле, если вы хотите применить свой значок ко всем кнопкам разделения, я бы заменил css выше на этот:

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