css - Why Cannot Change Checkbox Color Whatever I

Question

I try to style checkbox background color, but it won't change whatever I do. I am using firefox 29 latest.

Is there some rule changes in css or may be in the browser?

CSS:

input[type="checkbox"] {
    background: #990000;    
}

.chk {
   background-color: #990000;  

}

Here is a demo http://jsfiddle.net/6KXRg/

Answer 1

I had the same issue, trying to use large inputs and had a very small checkbox. After some searching, this is good enough for my needs:

input[type='checkbox']{
  width: 30px !important;
  height: 30px !important;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance:none;
  outline: 2px solid lightblue;
  box-shadow: none;
  font-size: 2em;
}

JSFiddle

Maybe someone will find it useful.

Answer 2

Let's say you have a checkbox with the class (bootstrap) .form-check-input. Then you can use an image for an example as the check mark.

SCSS code:

<input class="form-check-input" type="checkbox">

.form-check-input {
    width: 22px;
    height: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance:none;
    outline: 1px solid blue;

    &:checked
    {
        background: white url('blue.svg') no-repeat; 
        background-size: 20px 20px;
        background-position: 50% 50%;
    }
}

Answer 3

Checkboxes are not able to be styled. You would need a third party js plugin there are many available.

If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox.

The same problem will arise when trying to style that little down arrow on a drop-down select element.

Answer 4

Agree with iLoveTux , applying too many things (many colors and backgrounds) nothing worked , but here's what started working, Apply these properties to its css:

-webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance:none;

and then css styling started working on checkbox :)

Answer 5

Technically, it is possible to change the color of anything with CSS. As mentioned, you can't change the background-color or color but you can use CSS filters. For example:

input[type="checkbox"] { /* change "blue" browser chrome to yellow */
  filter: invert(100%) hue-rotate(18deg) brightness(1.7);
}

If you are really looking for design control over checkboxes though, your best bet is to do the "hidden" checkbox and style an adjacent element such as a div.

Answer 6

you cant change the background of checkbox but some how you can do a trick try this :)

.divBox {
    width: 20px;
    height: 20px;
    background: #ddd;
    margin: 20px 90px;
    position: relative;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.divBox label {
    display: block;
    width: 20px;
    height: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 1px;
    z-index: 1;
    /* 
    use this background transparent to check the value of checkbox 
    background: transparent;
    */
    background: Black;
    -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

.divBox input[type=checkbox]:checked + label {
    background: green;
}

<div class="divBox">
    <input type="checkbox" value="1" id="checkboxFourInput"name="" />
    <label for="checkboxFourInput"></label>
</div>