Why cannot change checkbox color whatever I do?

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 browse

Answer 1

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:

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