web-dev-qa-db-fra.com

Cases à cocher de style CSS

D'accord, j'ai donc vu de nombreuses solutions pour styliser les cases à cocher via CSS sur le Web. Cependant, je recherche quelque chose d'un peu plus robuste et je me demande si quelqu'un peut m'aider. Fondamentalement, je veux avoir cette solution , mais avec la possibilité d'avoir une couleur spécifiée CSS superposant une case à cocher grise. J'en ai besoin parce que j'aurai un nombre imprévisible de cases à cocher différentes, chacune nécessitant une couleur différente, et je ne veux pas créer de grandes quantités d'images différentes pour gérer cela. Quelqu'un a-t-il des idées sur la façon d'y parvenir?

csscheckbox
20
David Savage

J'ai créé un png transparent, où l'extérieur est blanc et la case à cocher est partiellement transparente. J'ai modifié le code pour mettre un backgroundColor sur l'élément, et le tour est joué !, une case à cocher colorisée.

http://i48.tinypic.com/raz13m.jpg (Il dit jpg, mais c'est un png).

Je posterais l'exemple, mais je ne connais pas de bonne façon de le montrer. Des bons sites de bac à sable là-bas?

Cela, bien sûr, dépend du support png. Vous pouvez mal le faire avec gif, ou mettre un calque css semi-transparent sur l'image, comme vous l'avez suggéré, puis utiliser un masque gif pour masquer le fond perdu de la boîte colorée. Cette méthode suppose la prise en charge de la transparence.

Ma méthode png utilise le css, js de la page à laquelle vous avez lié, avec ces modifications:

JS:

    // Changed all instances of '== "styled"' to '.search(...)' 
    // to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

    span[a] = document.createElement("span");

            // Added '+ ...' to this line to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");

CSS:

 .checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; /* Removed padding to eliminate color bleeding around image
       you could make the image wider on the right to get the padding back */
    background: url(checkbox2.png) no-repeat;
    display: block;
    clear: left;
    float: left;
 }

 .green {
    background-color: green;
 }

 .red {
    background-color: red;
 }

 etc...

HTML:

<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>

J'espère que cela a du sens.

Modifier:

Voici un exemple jQuery qui illustre le principe avec des cases à cocher:

http://jsfiddle.net/jtbowden/xP2Ns/

31
Jeff B

Il semble que vous le sachiez déjà, mais la solution à laquelle vous avez lié ci-dessus remplace en fait la case à cocher par une balise span avec une image pour donner l'effet d'une case à cocher "stylisée".

Pour la plupart des navigateurs comme IE et Firefox, il y a peu (le cas échéant) d'options et très peu de prise en charge du style des cases à cocher avec CSS uniquement.

6
Banjer

La réponse de Jeff B sur la façon de modifier ladite solution est correcte. Voici l'implémentation de sa modification à la solution si quelqu'un a besoin de copier et coller.

JavaScript http://Pastebin.com/WFdKwdCt

CSS http://Pastebin.com/TM1WwSQW

3
Johnny4000

J'ai trouvé http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ une solution javascript + css qui fonctionne sur win ie, win et mac: chrome, safari, Firefox, opéra. iOS Safari et chrome.

2
Sebastian Vox