Bootstrap checkbox editing border style not working

Question

I am trying to change the default style of bootstrap checkboxes. I want to add different borders for unchecked, hover and checked. When I try adding a shadow, it works, however border and changing the background color does not work.

input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border: 1px solid #59A29B;
    background color: #FFFFFF;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

Example of it not working. JS Fiddle

Thanks in advance.

Answer 1

Firstly, this is invalid markup:

<input type="checkbox" value="" id="test">
Option one
</input>

This is valid markup:

<label>
    <input type="checkbox" value="" id="test" />
    Option one
</label>

Secondly, you cannot style checkboxes this way. See How to style checkbox using CSS?

Thirdly, you have some invalid CSS properties. background color should be background-color, but again this will not work (see the link above).

A quick alternative to border here would be to use outline, but this isn't very desirable:

#test{
    outline: 1px solid #f00;
}

JSFiddle demo.