jquery-mobile - jQuery Mobile - 更改切换开关的突出显示颜色

Question

对不起，但我做不到。我有这个切换开关：http://oi44.tinypic.com/345en4m.jpg像 这样创建：

<div id="switch">
  <select name="toggleswitch1" id="toggleswitch1" data-theme="" data-track-theme="e" data-role="slider">
    <option value="off"> Offline </option>
    <option value="on"> Online </option>
  </select>
</div>

我想改变这个“在线”选项的字体和颜色。我已经用data-track-theme="e".

我还改变了普通滑块的高亮颜色，如下所示：

div.ui-btn-active {
  background-image: -webkit-gradient(linear,left top,left bottom,from( #ffefaa ),to( #ffe155 ));
  background-image: -webkit-linear-gradient( #ffefaa,#ffe155 );
  background-image: -moz-linear-gradient( #ffefaa,#ffe155 );
  background-image: -ms-linear-gradient( #ffefaa,#ffe155 );
  background-image: -o-linear-gradient( #ffefaa,#ffe155 );
  background-image: linear-gradient( #ffefaa,#ffe155 )
}

但我就是无法获得这个“离线”选项。:(

有人能告诉我如何到达吗？谢谢！

Answer 1

使用伪 CSS 选择器first-child覆盖切换开关中第一个选项的样式。

演示

div.ui-slider span:first-child {
  /* Your styles here following each property with !important */
}

你也可以用 jQuery 的方式来做。

$('[role=application] span:first-child').addClass('online');

.online是自定义样式。

演示