Changement de Case couleur d'arrière-plan lorsque la case est cochée

Im changer le look and feel de toutes mes cases à cocher à l'aide de css3, mais je vais essayer de trouver une meilleure façon de mettre en œuvre les bagages propriétés (si coché la case à être rempli seulement avec une couleur unie) et je ne sais vraiment pas si l'aide de rembourrage afin de le mettre à jour c'est la meilleure pratique depuis im obtenir des résultats différents lors de l'utilisation de différents navigateurs. Certains advide sera vraiment appréciée.

Voici ce que je veux accomplir:

Décoché La Case:

Changement de Case couleur d'arrière-plan lorsque la case est cochée

Coché La Case:

Changement de Case couleur d'arrière-plan lorsque la case est cochée

Voici le CSS et le HTML:

CSS:

.checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  display: inline-block;
  position: relative;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
  color: #595959;
  content: '14';
  font-size: 10px;
  left: 0px;
  padding: 2px 8px 2px 2px;
  position: absolute;
  top: 0px;
}

HTML:

<div class="checkbox">
  <div class="tag">Confidencial</div>
  <input type="checkbox" class="input-assumpte" id="input-confidencial">
  <label for="input-confidencial"></label>
</div>

Avis que j'ai à inclure un caractère dans la case cochée état, afin d'être en mesure d'ajouter un rembourrage pour remplir l'ensemble de la case avec une couleur d'arrière-plan, comme je l'ai dit avant im vraiment essayer de trouver une meilleure façon de le faire.

Voici la JSFiddel:
http://jsfiddle.net/Lter04p8/

  • Pouvez-vous fournir un jsFiddle?
  • converti inline extrait de
  • édité avec le jsFiddle.
InformationsquelleAutor Lowtrux | 2015-09-01
  1. 4

    Pas besoin de rembourrage ici. Utilisez simplement display: inline-block; sur :after, appliquer width et height, et aussi appliquer une transition en douceur. Aussi, vous n'avez pas besoin de ce surplus de <div>.

    CSS:

    .checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label:after {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  transition-duration: 0.3s;
  width: 16px;
  height: 16px;
  content: '';
  margin-left: 10px;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
}

    HTML:

    <div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Confidencial</label>
</div>

    • - ce une bonne solution de @connexo, merci beaucoup. J'essayais d'éviter le remplissage chose si votre méthode est très pratique.
    InformationsquelleAutor connexo
  2. 4

    Ajoutez la bonne background-color et width: 100%; height: 100%;
    Puis ajouter overflow: hidden pour le parent ( .input-assumpte ) et de supprimer la case marqueur.

    Avis que content: ""; est toujours en place, sans qu'il :after ou :before ne s'affiche pas.

    CSS:

    .checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.input-assumpte:checked + label:after {
  width: 100%;
  height: 100%;
  content: "";
  background-color: #008FD5;
  left: 0px;
  position: absolute;
  top: 0px;
}

    HTML:

    <div class="checkbox">
  <div class="tag">Confidencial</div>
  <input type="checkbox" class="input-assumpte" id="input-confidencial">
  <label for="input-confidencial"></label>
</div>

    • Vous pourriez se débarrasser de l' :après complètement. Mais depuis je ne sais pas comment le reste du site est construit, je viens de quitter pour @Lowtrux à modifier. – De toute façon, les nettoyer si comme suggéré.
    • Vrai - je l'ai mentionné il est principalement que l'OP a été d'essayer d'éviter d'utiliser padding.
    • Merci beaucoup @Jake, il a travaillé parfait ! Juste curieux au sujet de la crossbrowser problèmes de cette solution pour des choses stupides comme IE8, vais faire mes recherches tho, merci les gars !
    • Super! Découvrez caniuse.com pour plus d'informations de ce que vous pouvez réellement utiliser pour les différents navigateurs!
    • Hey @Jake im en utilisant connexo solution juste parce qu'elle s'accorde avec le type de structure que j'ai sur mon site, mais votre réponse est également une solution parfaite, merci pour les conseils.
    InformationsquelleAutor Jacob