CSS add custom background color to checkbox

Question

I do want to style a checkbox like this

White color border, White color tick mark, and dark blue (#283550) for the background.

I tried this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .watchlist {
            outline: 2px solid white;
            background-color: #283550;
        }
        .wrapper {
            padding: 3rem;
            background-color: #283550;
        }
    </style>
</head>
<body>
    <div class="wrapper">

        <input type="checkbox" class="watchlist">
    </div>
   
</body>
</html>

adding the white border was successful. But still, I can see a grey color border inside and also unable to fill the background with dark blue color.

How do I achieve this to work in any modern web browser?

Does [this](https://stackoverflow.com/a/58570835/4826740) answer your question? — maxshuty, Sep 19 '21 at 11:33

score 2 · Answer 1 · answered Sep 19 '21 at 11:31

Overriding the appearance property of checkbox a will result in a completely customized appearance.

Also use the :before & :after pseudo to style the checkbox tick element on :checked property.

Note: Use vendor prefix for wider browser support. (Firefox, Safari, etc.)

body {
  background: #283550;
}


/* custom checkbox */

.custom-checkbox {
  height: 23px;
  width: 23px;
  margin: 0;
  padding: 0;
  opacity: 1;
  appearance: none;
  border: 2px solid #FFF;
  border-radius: 3px;
  background: #283550;
  position: relative;
  margin-right: 10px;
}

.custom-checkbox:checked {
  border: 2px solid #FFF;
}

.custom-checkbox:checked:before,
.custom-checkbox:checked:after {
  content: "";
  position: absolute;
  height: 2px;
  background: #fff;
}

.custom-checkbox:checked:before {
  width: 6px;
  top: 11px;
  left: 3px;
  transform: rotate(44deg);
}

.custom-checkbox:checked:after {
  width: 12px;
  top: 8px;
  left: 5px;
  transform: rotate(-55deg);
}

.custom-checkbox:focus {
  outline: none;
}

<input class="custom-checkbox" type="checkbox" name="check" checked>

score 0 · Answer 2 · answered Sep 19 '21 at 11:14

You can achieve this by using Bootstrap 5 Checkbox, and update your HTML code with the following code

<div class="wrapper">
  <div class="form-check">
    <input class="form-check-input watchlist" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
      Checked checkbox
    </label>
  </div>
</div>

and your CSS with following code

.watchlist {
  outline: 2px solid white;
  background-color: white;
}
.wrapper {
  padding: 3rem;
  background-color: #283550;
  color: white;
}
.form-check-input:checked{
  background-color: #283550;
  border-color: #283550;
}

Enjoy!

score -1 · Answer 3 · answered Sep 19 '21 at 08:30

-1

The checkbox you're using is the default Firefox design. It'll look different on other browsers so I'd suggest you stick to Bootstrap buttons.

To change the color of the bootstrap button, read this answer.

answered Sep 19 '21 at 08:30

Delight

62
1
11

CSS add custom background color to checkbox

3 Answers3