CheckBox and CheckboxList that look like Bootstrap buttons-checkbox

I really Like Bootstrap and I had the need for the Bootstrap buttons-checkbox see Figure 1 below but not being a client side genius and could not workout how I would get the selected values, and I like the use the right tool or the right job (i.e. Checkbox for Checkbox and Radio button for Radio button) So I looked around and found this article here Stuff you can do with the “Checkbox Hack” and I thought I can make that work for me

Figure 1 – Bootstrap buttons-checkbox

So I made my own CSS (in LESS of course until I can get SASS) so here is the LESS source

// checkbox and rtadio button styles
.checkbox-buttons
{
    // hide the checkbox/radio button
    input[type=checkbox],
    input[type=radio]
    {
        // hide checkbox
        display: none;
    }

    // Default State
    label
    {
        display: inline-block;
        *display: inline;
        padding: 6px 12px;
        margin-bottom: 0;
        *margin-left: .3em;
        font-size: 14px;
        line-height: 20px;
        color: #7c7c7c;
        text-align: center;
        -webkit-text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        vertical-align: middle;
        cursor: pointer;
        background-color: #f5f5f5;
        *background-color: #e6e6e6;
        background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
        background-repeat: repeat-x;
        border: 1px solid #cccccc;
        *border: 0;
        border-color: #e6e6e6 #e6e6e6 #bfbfbf;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        border-bottom-color: #b3b3b3;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        font-weight: bolder;
    }
    // Toggled State
    input[type=checkbox]:checked + label,
    input[type=radio]:checked + label
    {
        color: #333333;
        background: rgb(74, 238, 48);
        *background-color: rgb(112, 255, 124);
        //background: linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
        //background: linear-gradient(to bottom, rgb(112, 255, 124), rgb(4, 212, 21));
        -webkit-text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.9);
        text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.9);
    }
    // Mouse over State
    input[type=checkbox]:hover + label,
    input[type=radio]:hover + label
    {
        -webkit-box-shadow: inset 2px 3px 2px #cccccc, 0 1px 6px rgba(255, 255, 255, 0.2);
        box-shadow: inset 2px 3px 2px #cccccc, 0 1px 6px rgba(255, 255, 255, 0.2);
    }
}

.with-border-radius
{
    & > label:first-of-type
    {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    & > label:last-of-type
    {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }
}

Listing 1 - checkbox-buttons and with-border-radius classes

So I have put it on NuGet here

Bootstrap buttons checkbox and radio buttons NuGet package

Use

Add the package to your project from NuGet

From the Package Manager Console type:
Install-Package NotAClue.Checkbox.Css.Buttons

It will add a Content folder to your project if it’s not already there with the checkbox-buttons LESS and CSS files add a reference to the min.css file to your master page and then decorate you CheckBoxes, CheckBoxLists, RadioButtons and RadioButtonLists with the “checkbox-buttons“ CSS class and if you want to have the ends of the buttons rounded add the “with-border-radius” CSS class. You will get the following:

Figure 3 – Checkbox Buttons in action

In Figure 3 you will see I have made the selected style more differentiated than the on in Bootstrap, it’s just a matter of style and usability I have some none computer literate mobile users in mind and wanted to make it clear that they had set a value.

Download

Everything you need is on NuGet.