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     lt div class  listContainer  gt       lt input type  checkbox  class  oddRow  gt item1 lt br  gt       lt input type  checkbox  class  evenRow  gt item2 lt br  gt       lt input type  checkbox  class  oddRow  gt item3 lt br  gt       lt input type  checkbox  class  evenRow  gt item4 lt br  gt           lt  div gt    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

User · Answer

My solution  Initially posted here    x000D   x000D  input type  checkbox     x000D    cursor  pointer  x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D    outline  0  x000D    background  lightgray  x000D    height  16px  x000D    width  16px  x000D    border  1px solid white  x000D    x000D   x000D  input type  checkbox   checked   x000D    background   2aa1c0  x000D    x000D   x000D  input type  checkbox   hover   x000D    filter  brightness 90    x000D    x000D   x000D  input type  checkbox   disabled   x000D    background   e6e6e6  x000D    opacity  0 6  x000D    pointer-events  none  x000D    x000D   x000D  input type  checkbox   after   x000D    content      x000D    position  relative  x000D    left  40   x000D    top  20   x000D    width  15   x000D    height  40   x000D    border  solid  fff  x000D    border-width  0 2px 2px 0  x000D    transform  rotate 45deg   x000D    display  none  x000D    x000D   x000D  input type  checkbox   checked after   x000D    display  block  x000D    x000D   x000D  input type  checkbox   disabled after   x000D    border-color   7b7b7b  x000D    x000D   lt input type  checkbox  gt  lt br gt  x000D   lt input type  checkbox  checked gt  lt br gt  x000D   lt input type  checkbox  disabled gt  lt br gt  x000D   lt input type  checkbox  disabled checked gt  lt br gt  x000D   x000D   x000D

User · Answer

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      It will be like this when checked with this code

User · Answer

A checkbox does not have background color  But to add the effect  you may wrap each checkbox with a div that has color   lt div class  quot evenRow quot  gt       lt input type  quot checkbox quot    gt   lt  div gt   lt div class  quot oddRow quot  gt       lt input type  quot checkbox quot    gt   lt  div gt   lt div class  quot evenRow quot  gt       lt input type  quot checkbox quot    gt   lt  div gt   lt div class  quot oddRow quot  gt       lt input type  quot checkbox quot    gt   lt  div gt

User · Answer

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

User · Answer

The Best solution to change background checkbox color   x000D   x000D  input type checkbox    x000D      margin-right  5px  x000D      cursor  pointer  x000D      font-size  14px  x000D      width  15px  x000D      height  12px  x000D      position  relative  x000D      x000D     x000D    input type checkbox  after   x000D      position  absolute  x000D      width  10px  x000D      height  15px  x000D      top  0  x000D      content       x000D      background-color   ff0000  x000D      color   fff  x000D      display  inline-block  x000D      visibility  visible  x000D      padding  0px 3px  x000D      border-radius  3px  x000D      x000D     x000D    input type checkbox  checked after   x000D     content       x000D     font-size  12px  x000D      x000D     lt input type  checkbox  name  vehicle  value  Bike  gt  I have a bike lt br gt  x000D     lt input type  checkbox  name  vehicle  value  Car  checked gt  I have a car lt br gt  x000D   x000D     lt input type  checkbox  name  vehicle  value  Car  checked gt  I have a bus lt br gt  x000D   x000D   x000D

User · Answer

We can provide background color from the css file  Try this one   lt  DOCTYPE html gt   lt html gt       lt head gt           lt style gt              input type  quot checkbox quot                     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  quot checkbox quot   checked                   background  blue                             checkbox-container                   position  absolute                  display  inline-block                  margin  20px                  width  25px                  height  25px                  overflow  hidden                         lt  style gt           lt  head gt       lt body gt           lt div class  quot checkbox-container quot  gt               lt input type  quot checkbox quot    gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

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

User · Answer

You can use peseudo elements like this    x000D   x000D  input type checkbox    x000D    width  30px  x000D    height  30px  x000D    margin-right  8px  x000D    cursor  pointer  x000D    font-size  27px  x000D    x000D   x000D  input type checkbox  after   x000D    content       x000D    background-color   9FFF9D  x000D    display  inline-block  x000D    visibility  visible  x000D    x000D   x000D  input type checkbox  checked after   x000D    content    2714   x000D    x000D   lt label gt Checkbox label x000D         lt input type  checkbox  gt  x000D       lt  label gt  x000D   x000D   x000D

User · Answer

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

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

My solution

Examples related to html

Examples related to css

Examples related to checkbox

Examples related to background-color