jQuery Mobile ui-input-btn自定义图标 [英] jquery mobile ui-input-btn custom icon

问题描述

使用jquery mobile，ui-input-btn ....

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>

我想使用自定义图标.

可以通过此控件完成此操作吗?

Can this be done with this control?

如果是，请提供示例.

谢谢

推荐答案

向包装div中添加一个自定义类，然后使用:after伪选择器覆盖该类的background-image和background-size.

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

这篇关于jQuery Mobile ui-input-btn自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！