Change checkbox background colour when checked in shiny:checkboxGroupInput()

Question

I've built a shiny app with checkboxGroupInput's that as a default show blue background when checked, e.g.

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

Now, I want to change check box background colour to dark grey when checked (HEX #666666) using CSS within the app.

I tried the following CSS options, with no change to app's look:

        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;
        }'
      )
    )

Any ideas how to achieve it?

Seems that is [not possible](https://stackoverflow.com/questions/24322599/css-why-cannot-change-checkbox-color-whatever-i-do). — Florian, Feb 16 '18 at 15:34
thanks, @Florian! I spent 3 hrs trying to do it, now I won't waste any more time ;) — Kasia Kulma, Feb 19 '18 at 08:42

Amy Ruddy · Answer 1 · 2019-09-18T17:45:04.840

If you are using Bootstrap 4 you can use the "custom-control" and "custom-checkbox" class.

/* 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>

Change checkbox background colour when checked in shiny:checkboxGroupInput()

1 Answers1