CODEWITHSUNDEEP
asp.netcss
Josh Blade
Josh Blade

Reputation: 981

Make checkbox look like button

In my web app (c#/MVC3), I have a huge set of checkboxes in a table. Rather than a table of checkboxes, I'd like for it to look like a wall of toggle buttons. To the user I want it to look like a wall of buttons and when they click one it is 'checked' and the button changes color.

I wasn't sure if there was CSS that could make a checkbox do this (look like a button and change colors on check rather than show a check mark), or if I would have to use some combination of buttons and javascript/jquery and hidden checkboxes or what.

Upvotes: 3

Views: 6447

Answers (4)

MCM
MCM

Reputation: 74

First of all, I'd actually avoid doing this for usability concerns but if you still want to then read on.

This is actually quite tricky to achieve but it is possible. My solution avoids the need to assign individual IDs to your check-boxes.

Essentially, you will need an image sprite for the "on" and "off" states which you will position with the CSS background-position property, using a toggle class. Then, the following jQuery will allow you to not only swap the image state, but also confirm the respective checkbox as checked or unchecked for use of the form. Do note, that the "actual" checkbox is hidden from view but the functionality remains.

<form>
    <input type="checkbox" class="custom" />
</form>

<style type="text/css">
.checkbox {
    clear:left;
    float:left;
    background:url('your_image');
    background-position:top;
    width:20px;
    height:20px;
    display:block;
}
.toggled {
    background-position:bottom !important;
}
</style>

$(document).ready(function () {
    var checkboxes = $('form .custom'),
        custom = $('<span></span>').addClass('checkbox');
    checkboxes.before(custom);
    checkboxes.css('visibility', 'hidden');
    $('.checkbox').click(function () {
        $(this).toggleClass('toggled');
        var isChecked = $(this).next(':checkbox');
        var value = isChecked.prop('checked') ? 'true' : 'false';
        if (value == 'false') {
            isChecked.prop('checked', true);
        } else {
            isChecked.prop('checked', false);
        }
    });
});

You will, of course, have to edit the CSS to suit your exact needs. I hope this helps as this task was deceptively non-trivial.

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68596

Yes, it is definitely possible to do what you want with pure CSS.

I think you should check out the jsFiddle mentioned on this question.

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

Radio buttons are generated by the operating system and cannot be easily styled.

If you wany something different you need to generate it using CSS/images and JavaScript.

Upvotes: 0

James Curran
James Curran

Reputation: 103515

The jQuery UI Button widget can handle that:

http://jqueryui.com/button/#checkbox

Upvotes: 2

Related Questions