Comment puis-je modifier le style de la bordure d'une case à cocher (entrée) ? J'ai mis border:1px solid #1e5180 sur elle, mais dans FireFox 3.5, rien ne se passe !
Outline est une excellente alternative.
Réponses
Trop de publicités?
Greg
Points
1011
Le contour est très bon, et il fonctionne pour toutes les boîtes de saisie et de sélection, ce qui le rend utile pour les classes ".error".
Vous devrez peut-être ajouter !important à votre css lorsque vous utilisez outline. Je l'ai testé dans Firefox 12.0 et sans !important, le contour disparaissait tant que je cliquais sur la case à cocher.
Valerij
Points
7781
Opera vous permet de styliser les cases à cocher sans avoir besoin de faire des manipulations supplémentaires - je laisserais de côté le style -o-appearance. Les styles -moz-appearance et -webkit-appearance sont très bien, cependant.
Oups - j'ai parlé trop vite : "-webkit-appearance : none ;" semble désactiver le comportement des cases à cocher.
Si quelque chose arrive dans tout navigateur, je serais surpris. Il s'agit de l'un de ces éléments de formulaire exceptionnels que les navigateurs ne permettent pas vraiment de styliser, et que les gens essaient généralement de remplacer par du javascript afin de styliser/coder quelque chose qui ressemble et se comporte comme une case à cocher.
Opéra gère très bien le style de la case à cocher. IE a un style qui entoure la case à cocher (pas sur la case à cocher elle-même).
awe
Points
9697
Pour Firefox , Chrome y Safari rien ne se passe.
Pour IE la bordure est appliquée à l'extérieur de la case à cocher (elle ne fait pas partie de la case à cocher), et l'effet d'ombrage "fantaisiste" dans la case à cocher a disparu (elle s'affiche comme une case à cocher à l'ancienne).
Pour Opéra le style de bordure applique réellement la bordure sur l'élément checkbox.
Opéra gère également les autres styles de la case à cocher mieux que les autres navigateurs : couleur est appliquée comme couleur de la coche, couleur de fond est appliquée comme couleur d'arrière-plan à l'intérieur de la case à cocher (IE applique l'arrière-plan comme si la case à cocher se trouvait à l'intérieur d'un fichier de type <div> avec arrière-plan)).
Conclusion
La solution la plus simple consiste à intégrer la case à cocher dans un fichier de type <div> comme d'autres l'ont suggéré.
Si vous voulez contrôler complètement l'apparence, vous devrez opter pour l'approche avancée image/javascript, également mentionnée par d'autres.
+1 pour la recherche, mais l'envelopper dans un div est no une solution. Il ne vous permet pas de styliser la case à cocher, il vous permet de styliser autour de la case à cocher, à moins que vous ne commenciez à essayer de la cacher et de peindre par-dessus, ce qui posera ses propres problèmes.
Le seul navigateur qui vous permet de donner un style à la case à cocher elle-même est Opera. L'enfermer dans un div est une solution qui peut être suffisante, mais cela dépend vraiment de ce que vous voulez. IE agit en fait comme si vous l'aviez placée dans un div si vous essayez de donner un style à la case à cocher !
Hussam
Points
41
Gardez également à l'esprit que l'élément label vérifiera la case à cocher chaque fois qu'il sera cliqué, même si la case à cocher n'est pas visible à l'intérieur de l'élément. Ainsi, sur l'étiquette, vous pouvez faire quelque chose comme label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; } et ensuite label > input[type=checkbox] { position: absolute; left: -999px; } Vous pourrez ainsi personnaliser le style de votre propre case à cocher. La case d'origine sera toujours cochée/décochée, mais l'utilisateur ne la verra pas. Il ne verra que votre case à cocher personnalisée.
