复选框/收音机-如何给按钮着色

Question

我有一个工作的Checkboxradio，但我想改变按钮的活动和非活动的颜色。我已经走了几个jQuery UI文档路径，这些路径看起来都能工作，但我似乎无法使所有的东西都对齐以实现这一点。下面是我页面中的HTML：

<fieldset>
    <label for="checkbox-1">Hot</label>
    <input type="checkbox" name="checkbox-1" id="checkbox-1">
    <label for="checkbox-2">Humid</label>
    <input type="checkbox" name="checkbox-2" id="checkbox-2">
</fieldset>

与此相关的唯一javascript是我的html页面中的以下脚本(按照我在jQuery UI Checkboxradio页面上看到的说明：

<script>
    $( function() {
    $( "input" ).checkboxradio({
        icon: false,
       });
    });
</script>

在我的页面正文中，这两行代码确保复选框最初显示在选中状态中：

$('#checkbox-1').prop('checked', true);
$('#checkbox-2').prop('checked', true);

Answer 1

我终于回到这个问题上，无意中发现了一个StackOverflow问题：Customize style for jQuery UI checkbox

底线是，我只需要添加以下CSS，复选框广播的按钮颜色现在就是我想要的：

.ui-checkboxradio-label.ui-corner-all.ui-button.ui-widget.ui-checkboxradio-checked.ui-state-active {
    background: #116611; !important;
}

Answer 2

首先要查看的是jQuery UI API文档：

checkboxradio小部件使用jQuery UI CSS框架来设计它的外观和感觉。如果需要特定于校验盒的样式，以下CSS类名可用于重写或作为classes选项的键：

• ui-checkboxradio：输入收音机或复选框。将被隐藏，其相关标签位于顶部。

- `ui-checkboxradio-label`: The label associated with the input. If the input is checked, this will also get the `ui-checkboxradio-checked` class. If the input is of type radio, this will also get the `ui-checkboxradio-radio-label` class.
- `ui-checkboxradio-icon`: If the icon option is enabled, the generated icon has this class.
- `ui-checkboxradio-icon-space`: If the icon option is enabled, an extra element with this class as added between the text label and the icon.

​

在您的帖子中，您没有指定您想要使用的颜色；无论哪种方式，我们都必须通过CSS分配这些颜色。看看您的代码和上面的引用，我们可以为Green和Red制作这个示例。

​

$(function() {
  $('#checkbox-1').prop('checked', true);
  $('#checkbox-2').prop('checked', true);
  $("input").checkboxradio({
    icon: false,
  });
});

fieldset label.ui-checkboxradio-label {
  border-color: #af0000;
  background: #c80000;
}

fieldset label.ui-checkboxradio-checked {
  border-color: #00af00;
  background: #00c800;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<fieldset>
  <label for="checkbox-1">Hot</label>
  <input type="checkbox" name="checkbox-1" id="checkbox-1">
  <label for="checkbox-2">Humid</label>
  <input type="checkbox" name="checkbox-2" id="checkbox-2">
</fieldset>

​

更新

根据您的注释，如果您希望使用“嵌套在标签中的复选框”(E.G.：http://jqueryui.com/checkboxradio/#no-icons )，则必须使用正确的HTML：

<fieldset>
  <label for="checkbox-1">
    Hot
    <input type="checkbox" name="checkbox-1" id="checkbox-1">
  </label>
  <label for="checkbox-2">
    Humid
    <input type="checkbox" name="checkbox-2" id="checkbox-2">
  </label>
</fieldset>