Checkbox CSS Not Working

Question

I'm trying to make a checkbox look like the rest of the buttons on my site: pencilfactorygames.com/createaccount.html Here's my css:

input[type="checkbox"]{
    display:none;
}
input[type="checkbox"] + label {
    background: -webkit-linear-gradient(top, #222 50%, #111 50%);
    border-radius: 5px;
    color:#FFF;
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
}
input[type="checkbox"]:checked + label {
    background: -webkit-linear-gradient(top, #0F0 50%, #F00 50%);
}

and here's my html: <input type="checkbox" name="ToS"> When I test it, it just looks like the plain default checkbox. Edit: Fixed, Forgot tomake checkbox invisible

Read up on this: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css, and this: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/ — kunalbhat, Sep 26 '13 at 22:54
Looks like you forgot to include checkbox styles in your main.css — Evgeny, Sep 26 '13 at 23:46

Mike · Answer 1 · 2013-11-11T11:01:39.900

1

You can style a checkbox by hiding the real checkbox input and substituting it with a graphical representation of it that gets checked/unchecked with javascript onclick(); method and sets the checked status to the proper checkbox input.

edited Nov 11 '13 at 11:01

answered Sep 27 '13 at 13:53

Mike

1,158
5
22
32

score 0 · Answer 2 · answered Sep 26 '13 at 22:58

0

On the CSS file that is being loaded, there is actually no CSS regarding the input type = "checkbox", so no style is being applied to the checkbox, only the other input areas.

answered Sep 26 '13 at 22:58

nshoes

143
1
8

so how should I make it work – pfg Sep 27 '13 at 13:22
You can load the CSS that you have on this page into main.css that is loading onto your page. The above poster that mentioned the JS method onclick(); is also right, and can be another solution. – nshoes Sep 27 '13 at 16:50
Also Eugene said the same as I did in his comment on your original problem. Just include the CSS on this page to your main.css that gets loaded on your site. – nshoes Sep 27 '13 at 17:03

score 0 · Answer 3 · answered Sep 27 '13 at 13:52

0

Styling checkboxes can be a pain with pure CSS. For a jQuery solution try Prettycheckable (http://arthurgouveia.com/prettyCheckable/)

answered Sep 27 '13 at 13:52

evilscary

2,097
5
23
33

Checkbox CSS Not Working

3 Answers3