26

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

Improve this question
0

5 Answers 5

Reset to default
83

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
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

accent-color property cannot change the checkmark color. after you set the "desired color" you only can change the background, and the checkmark icon color will automatically follow the desired color
13

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>

Improve this answer

2 Comments

Please check this new CSS property accent-color
Wow! That's great. Certainly, a much easier way to accomplish this. Looking forward to safari support for this!
13

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>

Improve this answer

Comments

12

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

Improve this answer

2 Comments

this works well, but the hack affects both background and foreground. needs to add another css pseudo-element for checked
for example: input[type=checkbox] { filter: opacity(0.4); } and input[type=checkbox]:checked { filter: opacity(0.7) hue-rotate(250deg) brightness(1.75); }
2

Your can try this in your global css

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.