选中闪亮后更改复选框背景颜色：checkboxGroupInput（）

Question

我使用checkboxGroupInput构建了一个闪亮的应用程序，在选中时默认显示蓝色背景，例如

checkboxGroupInput("water", "Water Level",
          choiceValues = c('Low', 'Medium','High'),
          selected = 'High')

现在，我想在应用中使用CSS检查（HEX＃666666）时将复选框背景颜色更改为深灰色。

我尝试了以下CSS选项，但没有更改应用程序的外观：

        tags$style(HTML('

        .checkbox input[type="checkbox"]:checked {
            position: absolute;
            margin-left: -20px;
            box-shadow: #666666;
            background-color: #666666;
}

        section.sidebar .shiny-input-container:checked {
            padding: 12px 15px 0px 15px;
            white-space: normal;
            color: #423F3D;
            box-shadow: #666666;
            background-color: #666666;
        }'
      )
    )

任何想法如何实现呢？

Answer 1

如果您使用的是Bootstrap 4，则可以使用“ custom-control”和“ custom-checkbox”类。

/* These are the default Bootstrap styles for the custom-checkbox
Can be tweaked to further customize

Blue background when checked */
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
}

/* Checkbox border radius */
.custom-checkbox .custom-control-label::before {
    border-radius: .25rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>