How to change checkbox background color in simple HTML

Question

I can not change checkbox background color. Any my attempt was unsuccessful, please see - https://jsfiddle.net/o4rnd1q7/1/

    input[type="checkbox"] {
        background-color: #002B4E !important;
        color: white;
    }

    input[type="checkbox"]:enabled:checked {
        background-color: #002B4E !important;
        color: white;
    }

   input[type="checkbox"]:before {
        background-color: #002B4E !important;
        color: white;
    }

    input[type="checkbox"]::before {
        background-color: #002B4E !important;
        color: white;
    }

    .dark-checkbox input[type="checkbox"]:checked {
        background-color: #002B4E !important;
        color: white;
    }

Checkbox still has light blue color instead needed dark blue color.

Answer 1

You can also do something simple in CSS only for the background color so far as I see. I wish there was a simpler way to do the checkmark, you think that would be considered the font color to it but it is not

input[type="checkbox"] {
accent-color: desired-color
}

Answer 2

It isn't possible to style checkboxes themselves, but it is possible to put a CSS filter on them without having to hide it in place of additional HTML.

input[type="checkbox"] {
    filter: sepia(100%) brightness(80%) hue-rotate(170deg) saturate(70%) contrast(300%);
}

HOWEVER, keep in mind that different browsers handle checkboxes and filters differently. I've tested this in Edge, Chrome, and Firefox and it looks quite different with your color in question.

Difference between an interpretation of CSS filtering on HTML input buttons across different browsers

Answer 3

You can't style the browser's default checkbox, so we have to hide it and create a custom checkbox like so:

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px black solid;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #002B4E;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}

<label class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

Answer 4

Further to daddycardona's useful answer, where he brilliantly suggests using accent-color, please note that accent-color will only style the checkbox background of :checked checkboxes.

You cannot style the background of UNchecked checkboxes - but you can give them an opacity, which effectively gives them a dim background IF THEY ARE ON A DARK BACKGROUND.

const arr = ['darkslategrey|#4f704f','maroon|pink','#222|#49596e'];
let cnt = 0;
document.getElementById('btn').addEventListener('click', () => {
  scheme = arr[cnt].split('|')
  document.querySelector('body').style.background = scheme[0];
  document.querySelector('#two').style.accentColor = scheme[1];
  cnt++;
  cnt = cnt > 2 ? 0 : cnt++;
});

body{font-size:1.5rem;color:white;background:#222;}
input[type=checkbox]{transform:scale(2); margin:0px 30px 10px;}
hr{position:relative;bottom:4px; border-bottom:1px solid #cccccc11;}
.accent{accent-color: #49596e; }
.accent:not(:checked){opacity:0.5;}
span{font-size:0.8em;}

<div><input type="checkbox" /> UN-Checked and unstyled <span>(too bright)</span></div>
<div><input type="checkbox" checked /> Checked and unstyled</div>
<hr>
<div><input type="checkbox" class="accent" /> UN-Checked with opacity <span>(less glaring)</span></div>
<div><input type="checkbox" class="accent" checked id="two"/> Checked with accent-color</div>
<button id="btn">Change background color</button>

Answer 5

Your can try this in your global css

input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
  accent-color: #673ab7;
}