如何修改jQuery UI Checkboxradio按钮的激活与未激活状态颜色

我之前也碰到过这个问题，jQuery UI的组件样式经常因为默认CSS优先级高，或者找不对对应的类名导致修改失效，其实只要精准覆盖它的默认类样式就可以解决。下面是具体的步骤和代码：

核心思路：覆盖默认CSS类 #

Checkboxradio的状态是通过特定的CSS类来控制的，我们只需要针对这些类编写自定义样式，并且确保自定义样式在jQuery UI的默认样式之后加载，就能覆盖掉默认颜色。

1. 未激活（未选中）状态样式 #

未选中的按钮会带有.ui-checkboxradio-label类，但没有.ui-checkboxradio-checked类，我们用:not()伪类来精准匹配：

/* 未选中状态的按钮样式 */
.ui-checkboxradio-label:not(.ui-checkboxradio-checked) {
  background-color: #f5f5f5; /* 自定义未激活背景色，这里用浅灰色 */
  color: #444; /* 自定义未激活文字颜色 */
  border-color: #ddd; /* 自定义未激活边框颜色 */
}

/* 可选：未选中状态鼠标悬停时的样式 */
.ui-checkboxradio-label:not(.ui-checkboxradio-checked):hover {
  background-color: #e8e8e8;
}

2. 激活（选中）状态样式 #

选中的按钮会同时带有.ui-checkboxradio-label和.ui-checkboxradio-checked类，直接组合这两个类来匹配：

/* 选中状态的按钮样式 */
.ui-checkboxradio-label.ui-checkboxradio-checked {
  background-color: #2563eb; /* 自定义激活背景色，这里用蓝色 */
  color: #ffffff; /* 自定义激活文字颜色，白色 */
  border-color: #1d4ed8; /* 自定义激活边框颜色 */
}

/* 可选：选中状态鼠标悬停时的样式 */
.ui-checkboxradio-label.ui-checkboxradio-checked:hover {
  background-color: #1d4ed8;
}

关键注意事项 #

• 加载顺序很重要：把这段自定义CSS放在jQuery UI的默认样式表之后引入，比如：

  <!-- 先引入jQuery UI默认样式 -->
  <link rel="stylesheet" href="jquery-ui.css">
  <!-- 再引入自定义样式 -->
  <style>
    /* 上面的自定义CSS代码 */
  </style>
  

• 提升选择器特异性：如果还是没生效，说明默认样式的优先级更高，可以给选择器加上父元素的类或者body前缀来提高优先级，比如：

  body .ui-checkboxradio-label.ui-checkboxradio-checked {
    /* 样式代码 */
  }
  

• 用开发者工具排查：如果还是不行，按F12打开浏览器开发者工具，选中按钮元素，看看生效的CSS样式是哪些，针对性地调整选择器即可。

完整示例 #

假设你的HTML结构和JS初始化是这样的：

<label for="cb1">同意协议</label>
<input type="checkbox" id="cb1">

<label for="radio-option1">选项一</label>
<input type="radio" name="options" id="radio-option1">
<label for="radio-option2">选项二</label>
<input type="radio" name="options" id="radio-option2">

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
  $(function() {
    $("input[type='checkbox'], input[type='radio']").checkboxradio();
  });
</script>

只需要在页面中添加前面的自定义CSS代码，就能看到按钮的颜色按照你的设置变化了。

内容的提问来源于stack exchange，提问作者Jeff Roloff