Changer la couleur d'une icône spécifique dans jquery mobile

Question

J'ai écrit le code suivant, mais je veux que mon icône accueil pour être en bleu, par exemple.Comment puis-je changer la couleur de fond?

  <ul data-role="listview" data-inset="true" class="ui-nodisc-icon ui-alt-icon">
        <li><a href="#page_1" class="ui-btn ui-icon-home ui-btn-icon-right" data-role="link" style="text-align: center; font: bold arial 95px;">Home</a></li>
        <li><a href="#" class="ui-btn ui-icon-shop ui-btn-icon-right" data-role="link" style="text-align: center;">Products</a></li>
    </ul>

Answer 1

Utilisation :after Sélecteur CSS pour remplacer icône du bouton.Vous avez aussi d'être précis lors de la substitution mondial des classes afin de ne pas appliquer les modifications apportées sur tous les boutons.

ul.ui-nodisc-icon li:first-child .ui-btn:after {
  background-color: #4da6ff;
}

La ci-dessus sera appliqué uniquement sur first-child de la listview.Vous pouvez remplacer li:first-child & .ui-btn avec un id ou class ajouté à ancre, par exemple:

<ul data-role="listview">
  <li>
    <a href="#" id="home">Home</a>
  </li>
</ul>

ul.ui-nodisc-icon #home:after {
  background-color: #4da6ff;
}

Démo