Discussion :

[Yaneck]

Bonjour, je viens de nouveau vers vous pour un petit souci. J'ai voulu personnaliser mes checkbox, là aucuns problèmes, mais le "V" à l’intérieur de la case ne s'affiche pas...

Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
input[type=checkbox] {
    height: 22px;
    width: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
	vertical-align: middle;
    position: relative;
    border: 3px solid #FFF;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #CCC;
    cursor: pointer;
  }
input[type="checkbox"]:checked {
    border: 3px solid #FFFFFF;
    background-color: #49C42E;
  &:before {
    content: '\2713';
	color: #FFF;
    display: block;
    width: 15px;
    height: 15px;
    text-align: center;
  }
}

J'imagine que j'ai oublier un truc, mais quoi ?? J'ai essayer plusieurs chose trouvé sur le net, mais aucuns résultats... J'ai l"impression que ça ne détecte pas le texte 'V' qu'il doit y avoir dans la case une fois coché.

Merci d'avance pour l'aide !!

[javatwister]

je ne connais pas trop le domaine mais ça a l'air de marcher comme ça:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
input[type=checkbox] {
    height: 22px;
    width: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
	vertical-align: middle;
    border: 3px solid #FFF;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #CCC;
    cursor: pointer;
  }
input[type="checkbox"]:checked {
    border: 3px solid #FFFFFF;
    background-color: #49C42E;
    text-align: center;
 
}
input[type="checkbox"]:checked::before{
    content: '\2713';
	color: #FFF;
    width: 15px;
    height: 15px;
}

[Yaneck]

Super, ça marche nikel, merci !!! Bizarre de revoir re-créer une imput{}, sur tout les codes trouvés il y en avait pas besoin.. Bref le principal est que tout fonctionne !!

Encore merci !!