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

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

Vous devriez utiliser

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

Ensuite, vous vous débarrassez de la case à cocher par défaut image / style et pouvez le styliser. Quoi qu'il en soit une bordure sera toujours là dans Firefox

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);

Je suis dépassé, je sais.. Mais une petite solution de contournement serait de mettre votre case à cocher dans une balise label, puis de styliser l'étiquette avec une bordure:

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

Puis styliser l'étiquette:

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

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 est parti (affiché comme une case à cocher oldfashioned).

Pour Opera le style de bordure applique en fait la bordure sur l'élément checkbox.
Opéra gère également d'autres stylings sur la case mieux que les autres navigateurs: couleur est appliquée comme la couleur de la tique, background-color est appliqué comme couleur d'arrière-plan à l'intérieur de la case (c'est à dire s'applique le fond comme si la case était à l'intérieur d'un <div>, avec en arrière-plan)).

Conclusion

La solution la plus simple est d'envelopper la case à cocher dans un <div> comme d'autres l'ont suggéré.
Si vous voulez contrôler complètement l'apparence, vous devrez aller avec l'approche avancée image/javascript, également meantiond par d'autres.

Voici une solution cross-browser CSS (pas d'images) pure basée sur les cases à cocher personnalisées et les boutons Radio de Martin avec le lien CSS3: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited/

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

J'ai testé 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 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>

Le style des cases à cocher (et de nombreux autres éléments d'entrée pour cette matière) n'est pas vraiment possible avec CSS pur si vous voulez changer radicalement l'apparence visuelle.

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

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

L'exemple utilise un "bouton" span ainsi que du texte dans une étiquette, mais il vous donne l'idée de la façon dont vous pouvez rendre la case à cocher invisible et dessiner quoi que ce soit derrière il.

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 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>

Voici un moyen simple (pour utiliser avant ou après des 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 */
}

Mettez-le dans un div et ajoutez une bordure à la div

<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>