jquery mobile ui-input-btn custom icon

问题

Using jquery mobile, ui-input-btn....

<div class="ui-input-btn ui-btn ui-icon-alert ui-btn-icon-top">
   <div class="buttonText">Service<br/> Interruptions</div>
   <input data-enhanced="true" value="Service Interruptions" type="button" id="service_interruptions">
</div>

I would like to use a custom icon.

Can this be done with this control?

If so, please provide a sample.

Thank you

回答1:

Add a custom class to wrapping div and then override background-image and background-size of that class using :after pseudo selector.

<div class="ui-input-btn ui-btn ui-custom-icon ui-btn-icon-top">
   <div class="buttonText">Service<br/>Interruptions</div>
   <input data-enhanced="true" value="Service Interruptions" type="button" id="service_interruptions">
</div> 

.ui-custom-icon:after {
  background-image: url('icon.png');
  background-size: 25px 25px;
}

Demo

来源：https://stackoverflow.com/questions/26587898/jquery-mobile-ui-input-btn-custom-icon