css case à cocher personnalisée mise en page

Question

Ce que j'essaie d'accomplir est simple: changer la disposition des cases à cocher du navigateur via CSS. C'est possible? Ou dois-je utiliser javascript pour cela? Et comment?

Merci d'avance!

Answer 1

boursiers Nevermind trouvé la sollution moi-même.

Ce script que j'ai écrit vous oblige à avoir un div/span pour chaque case, avec les classes "cochée" et "non cochée" avec les dispositions respectives, et un événement onclick dans chacun, avec le code suivant (étant 'b_availcheck' l'id de la case correspondante):

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

le 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; 

Ce script attache un événement onload à la fenêtre, les cases à cocher par défaut seront cachés au démarrage .. en outre, si le javascript est désactivé , les cases à cocher par défaut fonctionneront au lieu de cela ceux-là (merci beaucoup à Tigraine pour le conseil)

Answer 2

Si vous avez besoin de ce navigateur indépendant, optez pour un contrôle personnalisé.

Jetez un oeil à

jQuery custom styled checkbox

Si vous ne voulez pas une base jQuery puis regardez pour

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

Answer 3

il est impossible avec css, vous devez utiliser javascript . Je recommande vraiment fancy-form

Answer 4

Ce que nous avons l'habitude de faire est de créer une solution Javascript personnalisée (un div qui change de couleur lorsqu'on clique dessus) qui change la valeur d'une case cachée.

De cette façon, vous n'êtes pas limité par CSS et si Javascript est désactivé, il se dégrade bien à un checkbox normal (très important pour l'accessibilité)