CODEWITHSUNDEEP
css
Alex
Alex

Reputation: 545

How to change checkbox background color in simple HTML

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

Upvotes: 25

Views: 105898

Answers (5)

cssyphus
cssyphus

Reputation: 40038

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>

Upvotes: 11

Shiba Fame V2
Shiba Fame V2

Reputation: 25

Your can try this in your global css

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

Upvotes: 1

AlThePal78
AlThePal78

Reputation: 1112

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
}

Upvotes: 76

Pinballs Everywhere
Pinballs Everywhere

Reputation: 121

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

Upvotes: 12

Joshua Craven
Joshua Craven

Reputation: 4545

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>

Upvotes: 12

Related Questions