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

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

Check this out https://stackoverflow.com/a/34389136/4947434 – Jinu Kurian Jul 17 '19 at 08:34 — Jinu Kurian, Jul 17 '19 at 08:34

score 61 · Accepted Answer · edited Aug 09 '20 at 16:21

61

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>

edited Aug 09 '20 at 16:21

Lee Goddard

10,680
4
46
63

answered Sep 13 '11 at 07:54

dov.amir

11,489
7
45
51

19

I need 15rep before I can give you an upvote, but thanks! Did what you suggested and it worked perfectly... – Sep 13 '11 at 08:13
4

With me the checkbox bg is still grey - only the area around the checkbox will change background from the div... `
` – torbenrudgaard Sep 05 '17 at 02:01
@mariazahid I am also stuck on this,the background color of huking checkbox – shashi verma Dec 13 '18 at 06:45
This can be done now, see this answer: https://stackoverflow.com/a/70855040/4826740 – maxshuty Jan 25 '22 at 20:07

score 21 · Answer 2 · edited Aug 09 '20 at 16:22

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.

score 19 · Answer 3 · edited Sep 14 '18 at 12:17

19

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>

edited Sep 14 '18 at 12:17

Ramesh

2,297
2
20
42

answered Aug 05 '14 at 17:06

Diego Lins de Freitas

624
7
13

1

no, you can't. INPUT's are not allowed to have children. Chrome realisation is a bug. – Ilya Novojilov Oct 16 '16 at 19:27

score 12 · Answer 4 · edited Jul 01 '21 at 17:57

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.

agirault · Answer 5 · 2018-04-19T18:54:41.640

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>

If someone could advice why my text is not aligned after the checkbox, I'd love to know! CSS beginner here. — agirault, Apr 19 '18 at 18:56

maxshuty · Answer 6 · 2022-09-25T21:23:18.160

5

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" />

edited Sep 25 '22 at 21:23

answered Jan 25 '22 at 20:06

maxshuty

9,708
13
64
77

Hi, is there a way to change the checkmark color as well? – Dat Lam Mar 28 '22 at 04:07
@DatLam I'm not aware of a way to control that. The browser seems to do it's best guess – maxshuty Mar 28 '22 at 10:30
1

Man oh Man, you're a life saver. That's brilliant – Ally Sep 25 '22 at 21:22

score 1 · Answer 7 · answered Oct 21 '20 at 14:11

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>

score 0 · Answer 8 · answered Aug 16 '18 at 11:26

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>

score 0 · Answer 9 · answered Jul 10 '19 at 17:56

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

score -4 · Answer 10 · edited Sep 21 '15 at 14:02

-4

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.

edited Sep 21 '15 at 14:02

Quentin Hayot

7,786
6
45
62

answered Sep 21 '15 at 13:54

Friendly Banana

1

2

Don't do this. Besides this not working for `` in all browsers, there's a larger issue: it's important to [keep your styling separate from your markup](http://stackoverflow.com/a/15170354/129086). – simmer May 01 '16 at 21:44

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

10 Answers10

My solution

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

Linked

Related