Изменение цвета определенного значка в jQuery mobile

Я написал следующий код, но я хочу, чтобы мой дом значок будет синим, например. Как изменить цвет фона?

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

1 ответов


использовать :after селектор CSS для переопределения значка кнопки. Вы также должны быть конкретными при переопределении глобальные классы чтобы не применять изменения, сделанные на всех кнопках.

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

выше будет применяться только на first-child из списка. Вы можете заменить li:first-child & .ui-btn С id или class добавил якорь, например:

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

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

демо