'CSS ''background-color" attribute not working on checkbox inside <div>

The heading pretty much explains it. I have a couple of checkboxes inside a scrollable div. But for some reasons the 'background-color' attribute doesn't work. Although the 'margin-top' does seem to work...

Just puzzling me how one attribute can work and another not. It's also not like the div has it's own set of background color attributes that could potentially over ride the checkboxes attributes.

Anyways, below is my HTML (which is generated by JSP):

<div class="listContainer">
    <input type="checkbox" class="oddRow">item1<br/>
    <input type="checkbox" class="evenRow">item2<br/>
    <input type="checkbox" class="oddRow">item3<br/>
    <input type="checkbox" class="evenRow">item4<br/>
    ...
</div>

And here is my CSS:

.listContainer {
            border:2px solid #ccc;
            width:340px;
            height: 225px;
            overflow-y: scroll;
            margin-top: 20px;
            padding-left: 10px;
        }

.oddRow {
            margin-top: 5px;
            background-color: #ffffff;
        }

.evenRow{
            margin-top: 5px;
            background-color: #9FFF9D;
        }

Thanks in advance for anyone that can point me in the right direction!

htmlcsscheckboxbackground-color


Solution 1:[1]

In addition to the currently accepted answer: You can set border and background of a checkbox/radiobutton, but how it is rendered in the end depends on the browser. For example, if you set a red background on a checkbox

  • IE will show a red border instead
  • Opera will show a red background as intended
  • Firefox, Safari and Chrome will do nothing

This German language article compares a few browsers and explains at least the IE behavior. It maybe bit older (still including Netscape), but when you test around you'll notice that not much has changed. Another comparison can be found here.

Solution 2:[2]

You can use peseudo elements like this:

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 27px;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #9FFF9D;
  display: inline-block;
  visibility: visible;
}

input[type=checkbox]:checked:after {
  content: "\2714";
}
<label>Checkbox label
      <input type="checkbox">
    </label>

Solution 3:[3]

After so much trouble i got it.

    .purple_checkbox:after {
      content: " ";
      background-color: #5C2799;
      display: inline-block;
      visibility: visible;
    }
    
    .purple_checkbox:checked:after {
      content: "\2714";
      box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
      border-radius: 3px;
      height: 12px;
      display: block;
      width: 12px;
      text-align: center;
      font-size: 9px;
      color: white;
    }
 <input type="checkbox" class="purple_checkbox">

It will be like this when checked with this code. enter image description here

Solution 4:[4]

My solution

Initially posted here.

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

Solution 5:[5]

2022 and there is a much better solution to this problem now

Just use the accent-color property and make sure that you don't need to support outdated browsers that don't support this feature. ;)

.blue-checkbox {
    accent-color: #00eaff;
    height: 30px; /* not needed */
    width: 30px; /* not needed */
}
<input class="blue-checkbox" type="checkbox" />

Solution 6:[6]

We can provide background color from the css file. Try this one,

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="checkbox"] {
                width: 25px;
                height: 25px;
                background: gray;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: none;
                outline: none;
                position: relative;
                left: -5px;
                top: -5px;
                cursor: pointer;
            }
            input[type="checkbox"]:checked {
                background: blue;
            }
            .checkbox-container {
                position: absolute;
                display: inline-block;
                margin: 20px;
                width: 25px;
                height: 25px;
                overflow: hidden;
            }
        </style>    
    </head>
    <body>
        <div class="checkbox-container">
            <input type="checkbox" />
        </div>
    </body>
</html>

Solution 7:[7]

The Best solution to change background checkbox color

input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 12px;
    position: relative;
  }
  
  input[type=checkbox]:after {
    position: absolute;
    width: 10px;
    height: 15px;
    top: 0;
    content: " ";
    background-color: #ff0000;
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 3px;
  }
  
  input[type=checkbox]:checked:after {
	  content: "?";
	  font-size: 12px;
  }
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

  <input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>

Solution 8:[8]

Improving another answer here

input[type=checkbox] {
  cursor: pointer;
  margin-right: 10px;
}

input[type=checkbox]:after {
  content: " ";
  background-color: lightgray;
  display: inline-block;
  position: relative;
  top: -4px;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

input[type=checkbox]:checked:after {
  content: "\00a0\2714";
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lee Goddard
Solution 2 Ramesh
Solution 3 Joe
Solution 4
Solution 5 maxshuty
Solution 6 Codemaker
Solution 7 B.Abdelbasset
Solution 8 Dennis T

Related Questions