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

这是我的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-文本类样式页面的所有按钮将获得红色文本样式。

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

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

编辑：

感谢家伙我解决了这个问题添加的div包裹的复选框，并写了jQuery的：

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

，但我认为斯科特的解决好的工作太:)谢谢

来源

2011-12-21 Marco Matarazzi

很难说没有看到你的代码的其余部分。你有没有试过在你的选择器中更具体一些，比如'.ui-checkbox .ui-btn .ui-bttn-inner .ui-btn-text {color：red; }'？ – ptriek 2011-12-21 11:12:52

或者你可以创建一个新的'.ui-btn-text-red'类，它基本上具有和'.ui-btn-text'以及'color：red'一样的属性。或者如果只是一个按钮，为什么不在HTML中给它一个'id'并且做一个相应的css？ – 2011-12-21 12:30:48

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

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

它寻找独特的input元素keepMeInformed，然后找到它旁边的同级元素label，并将该样式仅应用于该标签的.ui-btn-text类元素。

来源

2011-12-21 15:23:56 ScottS

感谢家伙我解决了这个问题添加的div包裹的复选框，并写了jQuery的： <脚本类型= “文/ JavaScript的”> 功能changeCheckBoxStyle（）{\t $（ '＃checkBoxWrapper'）找到（“[类= UI-BTN-文本] '）的CSS（' 颜色”， '红'）; 但我认为斯科特的解决方案也可以工作得好:)谢谢 – 2011-12-21 15:34:33

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

回答

相关问题