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

Question

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

Skivvy

Check this out https://mcmap.net/q/45842/-how-to-style-a-checkbox-using-css – Transition

Answer 1

A checkbox does not have background color.

But to add the effect, you may wrap each checkbox with a div that has color:

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>

Motto

I need 15rep before I can give you an upvote, but thanks! Did what you suggested and it worked perfectly... – Skivvy

With me the checkbox bg is still grey - only the area around the checkbox will change background from the div... <div style="background-color: #ffffff;"><input type="checkbox" ng-model="vm.toTenant" style="width:25px; height:25px; margin-top:8px; background-color:#FFFFFF" value=""></div> – Negus

@mariazahid I am also stuck on this,the background color of huking checkbox – Walker

This can be done now, see this answer: https://mcmap.net/q/323322/-css-39-39-background-color-quot-attribute-not-working-on-checkbox-inside-lt-div-gt – Sempstress

Answer 2

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.

Tanana

Answer 3

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>

Bestow

no, you can't. INPUT's are not allowed to have children. Chrome realisation is a bug. – Yarmouth

Answer 4

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.

Professional

Answer 5

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>

Sethrida

If someone could advice why my text is not aligned after the checkbox, I'd love to know! CSS beginner here. – Sethrida

Answer 6

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

Just use the accent-color property and make sure you achieve proper contrast ratios for accessibility:

.blue-checkbox {
    accent-color: #00eaff;
    height: 30px; /* not needed */
    width: 30px; /* not needed */
}

<input class="blue-checkbox" type="checkbox" />

Sempstress

Hi, is there a way to change the checkmark color as well? – Xanthochroid

@DatLam I'm not aware of a way to control that. The browser seems to do it's best guess – Sempstress

Man oh Man, you're a life saver. That's brilliant – Enthrone

Answer 7

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>

Machismo

Answer 8

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>

Unavailing

Answer 9

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";
}

Choreograph

Answer 10

When you input the body tag, press space just one time without closing the tag and input bgcolor="red", just for instance. Then choose a diff color for your font.

Embroil

Don't do this. Besides this not working for <input type="checkbox"> in all browsers, there's a larger issue: it's important to keep your styling separate from your markup. – Glauce