css custom checkbox layout

Question

Hi,

What I'm trying to accomplish is simple : change the layout of the browser checkboxes via CSS. Is it possible? Or do I need to use javascript for that? And how?

Thanks in advance!

Answer 1

If you need that browser independent go for a custom control.

Have a look at

jQuery custom styled checkbox

If you don't want a jQuery based one then look for

Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

Answer 2

it’s not possible with css, you have to use javascript. i really recommend fancy-form

Answer 3

What we usually did at work is create a custom Javascript solution (a div that changes color when clicked) that changes the value of a hidden checkbox.

That way you are not constrained by CSS and if Javascript is disabled it will nicely degrade to a normal Checkbox (very important for Accessibility)

Answer 4

Nevermind fellows, found the sollution on my own.

This script I wrote requires you to have a div/span for each checkbox, with classes "checked" and "unchecked" with the respective layouts, and a onclick event within each, with the following code (being 'b_availcheck' the id of the respective checkbox):

<div class="checked" onclick="javascript:change_checkbox(this, 'b_availcheck');"></div>

The javascript :

function hide_checkboxes() {
    var checkboxes = document.getElementsByTagName('input');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
            checkboxes[i].style.visibility = 'hidden';
        }
    }
}

function change_checkbox(e, target) {
    if (e.className == 'checked') {
     document.getElementById(target).checked=false;
     e.className = 'unchecked';
    }
    else {
     document.getElementById(target).checked=true;
     e.className = 'checked';
    }
}

window.onload = hide_checkboxes;

This script attaches a onload event to the window so the default checkboxes get hidden on start .. Also, if javascript is disabled, the default checkboxes will work instead of this ones (many thanks to Tigraine for the tip)

Answer 5

If you are only shooting for Safari and Chrome then here is a pure CSS solution.