Флажок / Радио, как покрасить кнопки

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

В конце концов я вернулся к этой проблеме и наткнулся на вопрос Stackru: флажок Customize style for jQuery UI

Суть в том, что мне просто нужно было добавить следующий CSS, и цвета кнопок для checkboxradio теперь - то, что я хотел:

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

Answer 2

Первое, на что нужно обратить внимание, это документы API JQuery UI:

Виджет checkboxradio использует CSS-фреймворк jQuery UI для стилизации его внешнего вида. Если необходим специфичный для 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>

Обновить

Согласно вашему комментарию, если вы хотите использовать "Флажок, вложенный в метку" (например: http://jqueryui.com/checkboxradio/), вы должны использовать надлежащую разметку 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>