12
JUIL

CSS Checkbox - Personnalisez vos checkbox sans Javascript

Publié le 12/07/13 à 10h51 par Ouark

CSS Checkbox propose un générateur pour personnaliser les checkbox de vos formulaires en full CSS sans avoir besoin de Javascript.

CSS Checkbox - Customiser vos checkbox 100% CSS

CSS Checkbox  propose une grande variété de styles afin de trouver celui qui s'intégrera le mieux à vos formulaires. Reposant sur des images et du CSS, vos cases à cocher "new look" seront compatibles sur tout navigateur.

En plus de styles plus conventionnels représentant des marques ou des croix, vous pourrez aussi retrouver les styles utilisés par des sites connus comme Google ou Reddit.

Tous les styles sont téléchargeables en une archive unique ou à l'aide d'un générateur pour ne récupérer que celui qui nous interresse. Le générateur vous permettra également de récupérer le code html et la feuille de style correspondante.

Exemple de personnalisation d'une checkbox verte :

<input id="demo_box_1" class="css-checkbox" type="checkbox" />
<label for="demo_box_1" name="demo_lbl_1" class="css-label">Option #1</label>

Et pour ce qui est du CSS:

input[type=checkbox].css-checkbox {
    display:none;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left:20px;
height:15px; display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; } .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-green-check.png); }

 

Site officiel

Baraguiné par xam1311 le 06/08/13 à 16h45
xam1311 sur La Ferme du Web
Comme d'habitude support ultra limité Ie7-Ie8

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web