Comment puis-je changer le style de la bordure de la case à cocher (entrée)? Je l'ai mis border:1px solid #1e5180dessus, mais dans FireFox 3.5, rien ne se passe!
122
Si quelque chose se passe dans n'importe quel navigateur, je serais surpris. C'est l'un de ces éléments de formulaire exceptionnels que les navigateurs ont tendance à ne pas vous laisser trop styler, et que les gens essaient généralement de remplacer par du javascript afin de pouvoir styliser / coder quelque chose pour ressembler à une case à cocher.
Je suggère d'utiliser "contour" au lieu de "bordure". Par exemple:
outline: 1px solid #1e5180.la source
!importantà votre css lors de l'utilisation de contour. Je testais ceci dans Firefox 12.0 et sans! Important, le contour disparaîtrait tant que je cliquais sur la case à cocher.Tu devrais utiliser
Ensuite, vous supprimez l'image / le style de la case à cocher par défaut et pouvez le styliser. Quoi qu'il en soit, une bordure sera toujours là dans Firefox
la source
Vous pouvez utiliser des ombres de boîte pour simuler une bordure:
la source
Voici une solution multi-navigateurs CSS pure (sans images) basée sur les cases à cocher personnalisées et les boutons radio de Martin avec CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -avec-css3-revisité /
Voici un jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/
J'ai testé ceci sur les navigateurs suivants:
la source
Je suis obsolète, je sais. Mais une petite solution de contournement serait de mettre votre case à cocher dans une balise d'étiquette, puis de styliser l'étiquette avec une bordure:
puis stylisez l'étiquette:
la source
label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }et ensuitelabel > input[type=checkbox] { position: absolute; left: -999px; }Cela vous permettra de personnaliser votre propre case à cocher et la case d'origine sera toujours cochée / décochée mais l'utilisateur ne la verra pas. Ils ne verront que votre case à cocher personnalisée.:hoveret:checkedpour styliser d'autres états de votre case à cocher personnalisée.Voici ma version qui utilise FontAwesome pour la case à cocher, je pense que FontAwesome est utilisé par presque tout le monde, donc il est prudent de supposer que vous l'avez aussi. Non testé dans IE / Edge et je pense que personne ne s'en soucie.
la source
Pour Firefox , Chrome et Safari , rien ne se passe.
Pour IE, la bordure est appliquée en dehors de la case à cocher (pas dans le cadre de la case à cocher), et l'effet d'ombrage «fantaisie» dans la case à cocher a disparu (affiché comme une case à cocher démodée).
Pour Opera, le style de bordure applique en fait la bordure sur l'élément de case à cocher.
Opera gère également les autres styles de la case à cocher mieux que les autres navigateurs: la couleur est appliquée comme couleur de la coche, la couleur d' arrière-plan 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 était à l'intérieur d'un
<div>avec un arrière-plan)) .Conclusion
La solution la plus simple est d'encapsuler la case à cocher dans un
<div>comme d'autres l'ont suggéré.Si vous voulez contrôler complètement l'apparence, vous devrez utiliser l'approche avancée image / javascript, également signifiée par d'autres.
la source
Le style des cases à cocher (et de nombreux autres éléments d'entrée pour ce sujet) n'est pas vraiment possible avec le CSS pur si vous souhaitez modifier radicalement l'apparence visuelle.
Votre meilleur pari est d'implémenter quelque chose comme jqTransform qui remplace en fait vos entrées par des images et lui applique un comportement javascript pour imiter une case à cocher (ou un autre élément d'ailleurs)
la source
Non, vous ne pouvez toujours pas styliser la case à cocher elle-même, mais j'ai (enfin) trouvé comment styliser une illusion tout en conservant la fonctionnalité de cliquer sur une case à cocher. Cela signifie que vous pouvez le basculer même si le curseur n'est pas parfaitement immobile sans risquer de sélectionner du texte ou de déclencher un glisser-déposer!
L'exemple utilise un "bouton" d'étendue ainsi que du texte dans une étiquette, mais il vous donne une idée de la façon dont vous pouvez rendre la case à cocher invisible et dessiner quoi que ce soit derrière.
Cette solution convient probablement également aux boutons radio.
Ce qui suit fonctionne dans IE9, FF30.0 et Chrome 40.0.2214.91 et n'est qu'un exemple de base. Vous pouvez toujours l'utiliser en combinaison avec des images d'arrière-plan et des pseudo-éléments.
http://jsfiddle.net/o0xo13yL/1/
la source
Voici un moyen simple (à utiliser avant ou après les pseudo éléments / classes):
la source
la source
mettez-le dans un div et ajoutez une bordure au div
la source
la source