jQuerymobile：標題中的自定義圖標打開選擇

Question

在我的標題中，我有一個自定義圖標來打開選擇菜單。

的按鈕顯示沒有文字，但它有jQuery Mobile的按鈕，像下面的默認外觀：

<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

您可能需要在這裏和那裏調整它，但你將不得不重寫CSS是JQM適用

• 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>​