web-dev-qa-db-fra.com

Style une case à cocher dans Firefox - enlever la vérification et la bordure

Comment styliser une case à cocher dans Firefox et faire disparaître la coche et la bordure?

http://jsfiddle.net/moneylotion/qZvtY/

CSS:

body { background: black; }
#conditions-form { color: white; }
#conditions-form input[type=checkbox] {
    display:inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
    width:19px;
    height:19px;
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left;
    cursor:pointer;
}
#conditions-form input[type=checkbox]:checked {
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left;
}

HTML:

<form id="conditions-form">
    <ul>
        <li>
            <input id="condition3" type="checkbox" name="conditions[condition3]"></input>
            <label class="checkbox" for="condition3">Conditions 3</label>
        </li>
    </ul>
</form>
htmlcssfirefox
14
jnollette

Ce tutsplus tutorial a résolu ma question.

input[type="checkbox"] {
  display:none;
}
 
input[type="checkbox"] + label span {
  display:inline-block;
  width:19px;
  height:19px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
  cursor:pointer;
}
input[type="checkbox"]:checked + label span {
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

8
jnollette

Il existe un moyen très simple de le faire via les balises <label>. Il suffit de placer une étiquette autour de la case à cocher et d'insérer un élément factice qui sera utilisé pour la case à cocher de style personnalisé. Par exemple:

label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
  display:inline-block;
  border:2px solid #BBB;
  border-radius:10px;
  width:25px;
  height:25px;
  background:#C33;
  vertical-align:middle;
  margin:3px;
  position: relative;
  transition:width 0.1s, height 0.1s, margin 0.1s;
}
label.checkbox :checked + span {
  background:#6F6;
  width:27px;
  height:27px;
  margin: 2px;
}
label.checkbox :checked + span:after {
  content: '\2714';
  font-size: 20px;
  position: absolute;
  top: -2px;
  left: 5px;
  color: #99a1a7;
}
<label class="checkbox">
  <input type="checkbox"/>
  <span></span>
  I like cake
</label>

EDIT: certains choix de couleurs peuvent rendre l'état de votre case invisible pour les personnes daltoniennes. Lors de la création de ce code, je n'y avais pas pensé, mais la démonstration ci-dessus pourrait être invisible pour les personnes daltoniennes R/G. N'oubliez pas cela lors de la mise en œuvre (choisissez des couleurs claires/foncées, par exemple, ou montrez une différence de forme).

Les styles que j'ai utilisés sont simplement arbitraires et vous pouvez les modifier en tout ce que vous voulez. Vous pouvez même basculer un certain texte à l'intérieur via le pseudo-élément ::before, tel que ce que j'ai fait ici .

Je n'ai pas pu ouvrir l'URL de l'image que vous avez fournie à utiliser dans votre question, mais je pense que vous pourrez inclure l'image de votre choix en modifiant simplement un peu ce code. Il suffit de changer la couleur background actuelle pour l’URL de l’image que vous souhaitez utiliser.

Remarque: Cela ne fonctionnera pas dans certains navigateurs plus anciens .

29
Joeytje50

La réponse acceptée ci-dessus est excellente mais ce léger Tweak au violon de Joeytje50 permet de cocher les cases à cocher.

L'utilisation de l'opacité 0 au lieu de l'affichage signifie que la case à cocher est toujours tabulable et donc accessible au clavier.

Position absolute place la case à cocher de saisie en haut à gauche de la boîte dessinée, ce qui signifie que votre mise en forme reste soignée.

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}
input[type="checkbox"] + label {
    text-align:center;
    cursor:pointer;
}
input[type="checkbox"]:focus + label {
    background-color: #ddd;
}
input[type="checkbox"] + label div {
    display:inline-block;
    line-height: 16px;
    font-size: 12px;
    height: 16px;
    width: 16px;
    margin:-0px 4px 0 0;
    border: 1px solid black;
    color: transparent;
}
input[type="checkbox"]:checked + label div {
    color: black;
}
<input type="checkbox" id="c1" name="cc" />
<label for="c1">
    <div>&#x2714;</div>Check Box 1<br />
</label>
<input type="checkbox" id="c12" name="cc" />
<label for="c12">
    <div>&#x2714;</div>Check Box 2<br />
</label>

14
Lee Chase

Une solution plus propre IMHO qui utilise pure css pour redessiner les éléments.

Codepen

                input[type="checkbox"] {
            opacity: 0;
            position: absolute;
        }

        input[type="checkbox"] ~ label:before {
          content: '';
          display: inline-block;
          cursor: pointer;
          ...
          border: 3px solid #999;
          border-radius: 2px;
          transition: .3s;
        }

        input[type="checkbox"]:checked ~ label:before {
          background: #333;
        }

1
Scott Romack