jQuerymobile: icône personnalisée dans l'en-tête pour ouvrir la sélection

Question

Dans mon en-tête, j'ai une icône personnalisée pour ouvrir un menu de sélection.

Le bouton est affiché sans texte, mais il a l'apparence par défaut des boutons mobiles JQuery comme ci-dessous:

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

Mon but est de se débarrasser de l'arrière-plan par défaut avec le cercle avoir l'icône plus grande.

Est-il possible de le faire avec jQuery mobile?

Je pense que je pourrais ajouter un lien normal avec mon jeu d'icônes en tant qu'image d'arrière-plan dans css, mais je ne sais pas comment le faire afficher.

Answer 1

Vous pourriez avoir besoin de ruser ici et là, mais vous allez devoir remplacer le CSS qui JQM applique

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