Comments on: Custom radio and checkbox inputs using CSS

By: John Golden

John Golden — Fri, 13 Jan 2012 21:56:25 +0000

Has anyone inspected the DOM in FF or Chrome to see what the checked value is showing up as for these checkboxes? I’ve been having problems with a jQuery plugin in a .NET environment where the checkboxes appear visually to be checked but their checked property wasn’t actually checked. You can see this by opening up the DOM inspector. I tested these checkboxes in Chrome and FF and I’m seeing the same behavior. Anyone else?

By: Ryan Seddon

Ryan Seddon — Thu, 12 Jan 2012 01:44:58 +0000

@Jason - The Html.CheckBox helper actually creates two inputs the second is hidden and appears as a direct sibiling to the visible checkbox e.g.

 id="testy" name="testy" type="checkbox" value="true">
 name="testy" type="hidden" value="false">
 for="testy">Testy

That kills the direct sibling combinator I use in the CSS, the +. I would recommend not using the helper and just writing the html yourself.

By: Jason

Jason — Wed, 11 Jan 2012 06:23:38 +0000

I can’t get this to work with ASP.NET MVC 3 when using Html.CheckBox. I think it might be due to the way it creates a separate hidden element with the same name as the check box but I’m not sure. Any ideas?

By: Ryan Seddon

Ryan Seddon — Thu, 05 Jan 2012 00:59:30 +0000

@Christian –

Awesome, thank you!

By: Christian

Christian — Wed, 28 Dec 2011 09:27:26 +0000

SASS (scss) version of the code, minus styles that were not completely necessary to the solution. (... I hope the comments are formatted to preserve tabs...)

p > input[type=checkbox], p > input[type=radio] {
    position: absolute;
    left: 0;
    opacity: 0;
}
input[type=checkbox] + label, input[type=radio] + label {
    padding-left: 20px!important;
}

p:not(#foo) {
    > input + label {
        background: image-url(‘fancyCheckbox.png’) 0 -1px no-repeat;
        height: 16px;
    }
    > input[type=radio] + label {
        background-position: 0 -161px;
    }
    /* Checked styles */
    > input[type=radio]:checked {
        + label {
            background-position: 0 -241px;
        }
        &:hover + label, &:focus + label, + label:hover{
            background-position: 0 -261px;
        }
    }
    > input[type=checkbox]:checked {
        + label {
            background-position: 0 -81px;
        }
        &:hover + label, &:focus + label, + label:hover{
            background-position: 0 -101px;
        }
    }
    /* Hover & Focus styles */
    > input[type=checkbox] {
        &:hover + label, &:focus + label, + label:hover{
            background-position: 0 -21px;
        }
    }
    > input[type=radio] {
        &:hover + label, &:focus + label, + label:hover{
            background-position: 0 -181px;
        }
    }
    /* Active styles */
    > input[type=checkbox]{
        &:active + label, + label:hover:active{
            background-position: 0 -41px;
        }
    }
    > input[type=radio]{
        &:active + label, + label:hover:active{
            background-position: 0 -201px;
        }
    }
    > input[type=checkbox]:checked {
        &:active + label, + label:hover:active{
            background-position: 0 -121px;
        }
    }
    > input[type=radio]:checked {
        &:active + label, + label:hover:active{
            background-position: 0 -281px;
        }
    }
    /* Disabled styles */
    > input[type=checkbox]:disabled{
        + label, &:hover + label, &:focus + label, + label:hover, + label:hover:active{
            background-position: 0 -61px;
        }
    }
    > input[type=radio]:disabled{
        + label, &:hover + label, &:focus + label, + label:hover, + label:hover:active{
            background-position: 0 -221px;
        }
    }
    > input[type=checkbox]:checked{
        &:disabled + label, &:hover:disabled + label, &:focus:disabled + label, &:disabled + label:hover, &:disabled + label:hover:active{
            background-position: 0 -141px;
        }
    }
    > input[type=radio]:checked{
        &:disabled + label, &:hover:disabled + label, &:focus:disabled + label, &:disabled + label:hover, &:disabled + label:hover:active{
            background-position: 0 -301px;
        }
    }
}

By: Bricolage

Bricolage — Mon, 12 Dec 2011 17:04:39 +0000

OK, thank you very much ;)

By: saajan maharjan

saajan maharjan — Mon, 12 Dec 2011 06:57:38 +0000

thank you very much

By: Ryan Seddon

Ryan Seddon — Mon, 21 Nov 2011 03:00:41 +0000

@James Anelay - This technique relies on hiding the input and using the label to trigger the input change, and the order of the markup needs to be input > label as you can't do a selector to target a preceding sibling.

By: PixelZombie

PixelZombie — Sat, 19 Nov 2011 01:26:50 +0000

Awesome technique. I’m implementing this at the moment. I just have one thing: the :focus statement causes Firefox to (whatever you do) keep the focused image and css style as long as you click anywhere outside the input or label. To prevent this behaviour I commented out the :focus styles and it’s working like a charm.
Thanks a million!

By: James Anelay

James Anelay — Wed, 16 Nov 2011 13:19:27 +0000

What about if you have a lable before the input can you still make this work?