Comment changer le style de bordure de la case à cocher en CSS?

122

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!

html  css 
— Ricky
source

Réponses:

63

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.

— Sofia
source
4
Opera gère très bien le style sur la case à cocher. IE a un style qui entoure la case à cocher (pas sur la case à cocher elle-même).
— awe
4
Ils sont en fait moche de nos jours: D
— Gergely Fehérvári
1
sont toujours moche en 2020
— Paul le
210

Je suggère d'utiliser "contour" au lieu de "bordure". Par exemple: outline: 1px solid #1e5180.

— Greg
source
3
Outline est une excellente alternative.
— Nippysaurus
4
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".
— SztupY
2
Vous devrez peut-être ajouter !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.
— Weezle
3
C'est une excellente alternative, mais le problème du contour est que dans IE7 cela ne fonctionne pas !!
— Yises le
13
@Yises Vous devez vous inquiéter pour IE7? Yikes, je suis désolé.
— theblang
71

Tu devrais utiliser

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

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

— Valerij
source
2
Opera vous permet de styliser les cases à cocher sans aucun piratage supplémentaire - je laisserais le style -o-aspect. L'aspect -moz et l'apparence -webkit sont excellents, cependant.
— Neall
7
Oups - a parlé trop tôt: "-webkit-apparition: aucun;" semble désactiver le comportement de la case à cocher.
— Neall
6
pour moi (chrome 5) ce n'est pas le cas, vous devez
— Valerij
1
l'apparence n'avait jamais fait partie de la norme CSS. Ne l'utilise pas.
— Evgeny
wow c'est génial, je vais me débarrasser des plugins. je peux tout faire => | entrée [type = case à cocher] | entrée [type = case à cocher]: survol | entrée [type = case à cocher]: cochée | input [type = checkbox]: coché: après ...
— h0mayun
21

Vous pouvez utiliser des ombres de boîte pour simuler une bordure:

-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
— Dennis Heiden
source
@retrovertigo quelle version?
— Dennis Heiden
Version 12.0.2 (14606.3.4) / dernière sur macOS 10.14
— retrovertigo
@retrovertigo J'ai testé ma solution et vous avez raison. Ma réponse ne fonctionne pas pour Safari sans autres modifications (comme -webkit-looks: none;). 3 ans plus tard, j'utiliserais les solutions proposées par pendingfox ou Adan. Mais je vais essayer de prolonger ma réponse dans quelques semaines. Merci pour votre avis.
— Dennis Heiden
11

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:

  • Renard de feu (41.0.2) (42)
  • Google Chrome (46.0.2490.80 m)
  • Opéra (33.0.1990.43)
  • Internet Explorer (11.0.10240.16431 [Versions de mise à jour: 11.0.22])
  • Microsoft Edge (20.10240.16384.0)
  • Safari Mobile iPhone iOS9 (601.1.46)

label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}
 
label *,
label *
{
    cursor: pointer;
}
 
input[type="radio"],
input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}
 
input[type="radio"] + span,
input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}
 
label:hover span::before,
label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}
 
label:hover span,
label:hover span
{
    color: #000;
}
 
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
     
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}
 
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
    cursor: default;
     
    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}
 
input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 30px;
    margin-top: -1px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}



input[class="blue"] + span::before
{
    border: solid 1px blue;
    background: #B2DBFF;
    background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
    background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
    background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
    background: -o-radial-gradient(#B2DBFF, #dfdfdf);
    background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
    color: darkblue;
}



input[class="red"] + span::before
{
    border: solid 1px red;
    background: #FF9593;
    background: -moz-radial-gradient(#FF9593, #dfdfdf);
    background: -webkit-radial-gradient(#FF9593, #dfdfdf);
    background: -ms-radial-gradient(#FF9593, #dfdfdf);
    background: -o-radial-gradient(#FF9593, #dfdfdf);
    background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
    color: darkred;
}
 <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-02"  class="blue" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-03"  class="red" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>
Développer l'extrait

— Adan Rehtla
source
10

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:

<label class='hasborder'><input type='checkbox' /></label>

puis stylisez l'étiquette:

.hasborder { border:1px solid #F00; }
— Hussam
source
1
Gardez également à l'esprit que l'élément d'étiquette coche la case à chaque fois qu'il est cliqué, même si la case à cocher n'est pas visible à l'intérieur. Donc, 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; }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.
— Gavin
1
Vous avez oublié d'ajouter, vous pouvez alors utiliser des sélecteurs comme :hoveret :checkedpour styliser d'autres états de votre case à cocher personnalisée.
— Gavin
10

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.

input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

	color: black !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<input type="checkbox">
Développer l'extrait

— en attente
source
9

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.

— admiration
source
2
+1 pour la recherche, mais l'envelopper dans un div n'est pas 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 à jouer en essayant de la cacher et de peindre dessus, ce qui aura ses propres problèmes.
Eh bien, le seul navigateur qui vous permet de styliser la case à cocher elle-même est Opera. L'envelopper 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 vous le mettez dans un div si vous essayez de styliser la case à cocher!
— awe
7

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)

— ChrisR
source
4

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/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>
— LGT
source
2

Voici un moyen simple (à utiliser avant ou après les pseudo éléments / classes):

input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:after {
    position: absolute;
    top: 0;
    left: 0;
    /* Above three lines allow the checkbox:after position at checkbox's position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}
— Alex Fang
source
Je pense que c'est une façon intelligente de redéfinir votre case à cocher et quelque chose comme ça.
— Alex Fang
1
Ne fonctionne pas sur Firefox et IE. Plus important encore, il s'agit d'une implémentation incorrecte de Chrome, car les éléments vides ne sont PAS autorisés à avoir un contenu.
— Leo
Leo, vous interprétez mal le terme «contenu», tout ce qu'il dit, c'est que ces éléments vides ne peuvent pas avoir de contenu entre les deux car il n'y a pas de balise de fermeture. par exemple, <a> content </a> a une balise de fermeture afin qu'il puisse y avoir un contenu entre ces balises. mais l'entrée n'a pas la balise de fermeture donc elle ne peut pas avoir le contenu par principe. D'autre part, les pseudo-éléments ont une propriété appelée "contenu" qui peut être utilisée partout.
— pendingfox
-1 

<!DOCTYPE html>
<html>
<head>
<style> 

.abc123
{
	-webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: #FFFFFF;
	border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -3px;
  left: 4px;
  width: 3px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked   {
    background: #327DFF;
    outline: none;
    border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
	outline: none;
}

input:hover {
   border: 1px solid rgba(50,125,255,1);
}

</style>
</head>
<body>

<input class="abc123" type="checkbox"></input>


</body>
</html>
Développer l'extrait

— KeepLearn
source
Premièrement: ": après" créer √; Deuxièmement: "-webkit-looks: none" laisse le style d'origine ne peut pas fonctionner, et vous pouvez ensuite définir votre style.
— KeepLearn
2
Veuillez rédiger une brève description de votre réponse.
— Angel F Syrus
-5

mettez-le dans un div et ajoutez une bordure au div

— Midhat
source
5
Ensuite, vous aurez une double bordure.
— Egor Pavlikhin
<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Ma case à cocher </input> </div> fonctionne bien avec htmlsandbox
— Midhat
8
Définissez «fonctionne bien». Par exemple, je n'ai jamais vu de case à cocher de 120 pixels de large.
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— Midhat
source
7
@lexu Il n'y a rien de tel que </input>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.