复选框/收音机如何颜色按钮

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问题：jquery ui ui复选框的自定义样式

最重要的是，我只需要添加以下CSS，而Checkboxradio的按钮颜色现在是我想要的：

.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框架来设计其外观和感觉。如果需要CheckBoxRadio特定样式，则可以将以下CSS类名称用于覆盖或作为classes选项的键：

• ui-checkboxradio：类型无线电或复选框的输入。将被隐藏，其相关标签位于顶部。

  • ui-checkboxradio-label：与输入关联的标签。如果检查输入，这也将获得ui-checkboxradio-checked类。如果输入是类型无线电，这也将获得ui-checkboxradio-radio-label类。
  • ui-checkboxradio-icon：如果启用了图标选项，则生成的图标具有此类。
  • ui-checkboxradio-icon-space：如果启用了图标选项，则在文本标签和图标之间添加了此类的额外元素。

在您的帖子中，您没有指定要使用的颜色；无论哪种方式，我们都必须通过CSS分配这些分配。查看您的代码和上面的参考，我们可以为绿色和红色进行此示例。

$(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>

update

根据您的评论，如果您想使用"嵌套在标签中"的复选框(例如：http://jqueryui.com/checkboxboxradio/#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>