[CSS] Radiobutton vervangen door afbeelding

[NoepZor]

Hallo,

Weet iemand of het mogelijk is om een radiobutton te vervangen door een afbeelding. Ik wil graag een kruisje tonen als de radiobutton niet geselecteerd is en een vinkje als deze wel geselecteerd is. Ik heb het geprobeerd met een background image, maar deze blijft onder de button zitten. Bij Firefox zie ik helemaal geen achtergrondafbeelding. Op google kon ik ook geen relevante informatie vinden.

Weet iemand of dit mogelijk is, of wellicht op een andere manier?

[André]

Dump de radiobutton of maak hem invisible. Maak daarna een afbeelding die onclick heen en weer switched tussen beide plaatjes. Op de achtergrond hou je dan de waarde in een input type=hidden bij

[cyberstalker]

Dit is wel mogelijk, alleen niet in Internet Explorer, tenzij je javascript wilt gaan gebruiken.

Je kunt dit doen met behulp van labels. Je zet dan een <input type="radio" id="option1"><label for="option1"> in je document, waarbij je de namen dan natuurlijk vervangt door de namen van jouw formulier.

Vervolgens verberg je de radiobutton met CSS, en laat je de achtergrond van de label afhangen van het veld waar het achter staat. Zoiets:

Cascading Stylesheet:

input[type="radio"]
{
    display: none;
}

input[type="radio"] + label
{
    height: 8px;
    width: 8px;
    background-image: url('images/radio_not_checked.png');
}

input[type="radio]:checked + label
{
    height: 8px;
    width: 8px;
    background-image: url('images/radio_checked.png');
}

Alleen nog even de namen van de plaatjes en hoogte en breedte veranderen en klaar is NoepZor .

[NoepZor]

Oke.. daar was ik zelf nog niet op gekomen, om de label attribuut daarvoor te misbruiken. Hartelijk dank, ik ga het zeker proberen.

[benoni]

cyberstalker schreef op vrijdag 10 november 2006 @ 20:30:
Dit is wel mogelijk, alleen niet in Internet Explorer, tenzij je javascript wilt gaan gebruiken.

Zo'n Javascript oplossinkje kan ik er nog wel bij dumpen voor wie 'r wat aan heeft. Deze gebruik ik zelf niet alleen voor custom checkboxes, maar ook om stukken van een formulier 'open te klappen' aan de hand van een checkbox of radio button.

code:

// tick()
//
// Switches visibility of HTML code blocks for checkboxes and radio buttons.
//
// Author: benoni, 2005-2006. Use under GPL2 license.
//
// Usage sample:
//
// <input id="me" class="invisible" type="checkbox" name="name" value="check" />
// <a id="me_0" class="check0 normal" href="javascript:tick('me')">Unchecked</a>
// <a id="me_1" class="check1 hidden" href="javascript:tick('me')">Checked</a>
//
// The 'invisible' class needs 'visibility: hidden;' in the stylesheet.
// Add 'display: none;' for the 'hidden' class. You can add background
// images for the 'check0' and 'check1' classes to have custom buttons.
//
function tick() {
    var a, i, id, it, name, on;
    var list = new Array();

    for (a = 0; a < arguments.length; a++) {
        it = arguments[a];
        on = '';
        list = it.split('=');
        if (list.length) {
            it = list[0];
            on = list[1];
        }

        // Find corresponding checkbox or radio button:
        it = document.getElementById(it);
        if (it && it.form) {

            // Set or toggle the value:
            if (it.type == 'radio' || it.type == 'checkbox') {
                switch (on) {
                    case '1': {
                        it.checked = 1;
                        break;
                    }
                    case '0': {
                        it.checked = 0;
                        break;
                    }
                    default: {
                        it.click();
                    }
                }
            }
            if (it.type == 'submit') {
                it.form.submit();
            }
            if (it.type == 'reset') {
                it.form.reset();
            }
            if (it.type == 'text') {
                it.value = on;
            }

            // List form elements:
            list = it.form.elements;

            // Find dependant HTML blocks and toggle visibility:
            for (i = 0; i < list.length; i++) {
                if (list[i].type == 'radio' || list[i].type == 'checkbox') {
                    id = list[i].id;
                    on = list[i].checked;
                    it = document.getElementById(id + '_0');
                    if (it && it.style) {
                        it.style.display = on ? "none" : "block";
                    }
                    it = document.getElementById(id + '_1');
                    if (it && it.style) {
                        it.style.display = on ? "block" : "none";
                    }
                }
            }
        }
    }
}