How to change checkbox background color in simple HTML

user_15870284 0
Viewed 13165

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.

enter image description here

css
3 Answers

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
}
user_1834660

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>

user_11549790

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

enter image description here

user_65851280
Related