web-dev-qa-db-fra.com

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

Comment puis-je changer le style de la case à cocher (entrée)? J'ai mis border:1px solid #1e5180 dessus, mais dans FireFox 3.5, rien ne se passe!

htmlcss
109
Ricky

Si quelque chose se passe dans n'importe quel navigateur , je serais surpris. C’est un de ces éléments de formulaire exceptionnels que les navigateurs ne vous laissent généralement pas styler. Les internautes essaient généralement de le remplacer par du javascript afin de pouvoir styler/coder quelque chose qui ressemble à une case à cocher.

Voici un exemple: prettyCheckboxes .

59
D_N

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

196
Greg

Tu devrais utiliser

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

Ensuite, vous vous débarrassez de l’image/du style de case à cocher par défaut et vous pouvez l’appeler. Quoi qu'il en soit, une frontière sera toujours là dans Firefox

68
Valerij

Vous pouvez utiliser des ombres pour créer 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);
17
Dennis Heiden

Je suis obsolète, je sais. Mais une solution de contournement serait de mettre votre case à cocher à l'intérieur d'une balise d'étiquette, puis de styler l'étiquette avec une bordure:

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

puis coiffez l'étiquette:

.hasborder { border:1px solid #F00; }
10
Hussam

Voici une solution multi-navigateurs CSS (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- et -radio-buttons-with-css3-revisited /

Voici un jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

J'ai testé cela sur les navigateurs suivants:

  • FireFox (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 la 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>
10
Adan Rehtla

Pour Firefox, Chrome et Safari, rien ne se passe.

Pour IE, la bordure est appliquée en dehors de la case à cocher (pas en tant que partie de la case à cocher) et l'effet d'ombrage "fantaisie" dans la case à cocher a disparu (affiché sous la forme d'une case à cocher ancienne).

Pour Opera, le style de bordure applique réellement la bordure à l'élément de case à cocher.
Opera gère également les styles de la case mieux que les autres navigateurs: couleur est appliqué comme couleur du tick, couleur de fond est appliqué comme couleur de fond dans la case à cocher (IE applique le fond comme si la case était à l'intérieur d'un <div> avec fond)).

Conclusion

La solution la plus simple consiste à insérer la case à cocher dans un <div> comme l'ont suggéré d'autres.
Si vous souhaitez contrôler complètement l’apparence, vous devrez utiliser l’approche avancée image/javascript, également utilisée par d’autres.

9
awe

Voici ma version qui utilise FontAwesome pour le ticker de case à cocher, je pense que FontAwesome est utilisé par presque tout le monde, alors vous pouvez en déduire que vous l'avez. 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">
8
pendingfox

Les cases de style (et de nombreux autres éléments d’entrée pour ce sujet) ne sont pas vraiment possibles avec du CSS pur si vous voulez changer radicalement l’aspect visuel.

Votre meilleur pari est d'implémenter quelque chose comme jqTransform qui remplace en réalité vos entrées par des images et lui applique un comportement javascript pour imiter une case à cocher (ou un autre élément d'ailleurs)

7
ChrisR

Non, vous ne pouvez toujours pas nommer la case à cocher elle-même, mais j'ai (enfin) compris comment styliser une illusion tout en en conservant la fonctionnalité consistant à 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 le glisser-déposer!

L'exemple utilise un "bouton" d'étendue ainsi que du texte dans une étiquette, mais cela 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 elle.

Cette solution convient probablement aussi aux boutons radio.

Ce qui suit fonctionne dans IE9, FF30.0 et Chrome 40.0.2214.91 et n’est qu’un exemple élémentaire. 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>
4
LGT

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 */
}
2
Alex Fang
<!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>
0
KeepLearn