Question

我需要更改复选框标签的样式。

这是我的HTML：

<div class="ui-checkbox">
  <input id="keepMeInformed" type="checkbox" data-theme="d" onchange="fixCheckboxesValues();" checked="checked" value="1" name="optedIn">
    <label class="optional ui-btn ui-btn-icon-left ui-btn-corner-all ui-btn-up-d ui-checkbox-off" for="keepMeInformed" data-theme="d">
      <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
         <span class="ui-btn-text">Label text</span>
         <span class="ui-icon ui-icon-shadow ui-icon-checkbox-off"></span>
       </span>
    </label>
</div>

我需要文本为红色，但如果我更改.ui-btn-text类样式，页面的所有按钮都将获得红色文本样式。

.ui-btn-text{
    color:red;
}

有没有办法只更改复选框中标签的颜色？

修改：

谢谢大家，我解决了添加包含CheckBox并编写jQuery的div的问题：

function changeCheckBoxStyle() { 
   $('#checkBoxWrapper').find('[class=ui-btn-text]').css('color','red');
 }

但我认为斯科特的解决方案也可以正常运行:)谢谢

Answer 1

假设您正确使用ID（页面是唯一的），那么这应该有效：

#keepMeInformed + label .ui-btn-text {
    color: red;
}

它会查找唯一的input元素keepMeInformed，然后在其旁边找到同级label元素，并将该样式仅应用于该标签的.ui-btn-text类元素。< / p>

如何在不更改整个类的情况下更改复选框的颜色？

1 个答案: