jQuerymobile：标题中的自定义图标打开选择

Question

在我的标题中，我有一个自定义图标来打开选择菜单。

按钮显示时没有文字，但它具有Jquery移动按钮的默认外观，如下所示：

<form name="actions" action="" method="post">
    <div class="ui-select ui-btn-right" data-inline="true">
        <select name="select-action" id="select-action" data-native-menu="true" data-icon="myapp-actions" data-iconpos="notext" data-inline="true" tabindex="-1">
            <option value="save">Save</option>
            <option value="print">Print</option>
            <option value="share">Share</option>
        </select>
    </div>
</form>

我的目标是摆脱圆圈的默认背景，使图标更大。

是否可以使用jQuery mobile做到这一点？

我想我可以添加一个普通链接，我的图标设置为css中的背景图片，但我不知道如何让它显示选择打开。

Answer 1

您可能需要在此处进行调整，但您必须覆盖jQM应用的CSS

• http://jsfiddle.net/phillpafford/vsw3r/1/

CSS

.ui-icon-myapp-actions {
    background-image: url("http://i.stack.imgur.com/YP6jU.png");
    width:40px;
    height:36px;
}
.ui-btn-icon-notext {
    width:40px;
    height:36px;
}
.ui-btn-up-c {
    border: 0px;
}
.ui-btn-icon-notext .ui-btn-inner {
    padding: 0px;           
}
.ui-btn-inner {
    border-top: 0px;   
}

HTML

<form name="actions" action="" method="post">
    <div class="ui-select ui-btn-right" data-inline="true">
        <select name="select-action" id="select-action" data-icon="myapp-actions" tabindex="-1" data-inline="true" data-corners="false" data-iconshadow="false" data-shadow="false" data-iconpos="notext">
            <option value="save">Save</option>
            <option value="print">Print</option>
            <option value="share">Share</option>
        </select>
    </div>
</form>​