web-dev-qa-db-fra.com

Création d'une case à cocher personnalisée avec CSS & Bootstrap

J'ai le balisage suivant en utilisant le cadre bootstrap.

<div class="col-md-4">
  <div class="custom-container">
    <img class="center-block img-responsive img-circle invite-contact-trybe" src="{$img}" alt="Contact Image">
    <input class="invite-contact-checkbox" type="checkbox">
  </div>
</div>

J'aimerais atteindre les objectifs suivants:

Checkbox design

Est-il possible de le faire en utilisant CSS?

J'aurais évidemment besoin de 3 états:

Initiale:

.custom-container input[type=checkbox]{}

Une certaine forme d'état stationnaire:

.custom-container input[type=checkbox]:hover{}

Quand il est vérifié:

.custom-container  input[type=checkbox]:checked{}

Quelqu'un peut-il proposer une solution?

htmlcsstwitter-bootstrapcheckboxcustomization
13
cwiggo

Remplacement de la case à cocher de l'image d'arrière-plan

Créons ceci

Screenshot

Ceci est un exemple très simple utilisant un :before pseudo-élément ainsi que :checked et :hover États.

Avec ce HTML clair

<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>

Notez les attributs for et id correspondants, ceci attache l'étiquette à la case à cocher. De plus, l'ordre des éléments est très important; l'étiquette doit venir après l'entrée pour que nous puissions styliser avec input:checked

Ainsi que ce CSS de base

  • La case à cocher est masquée par display: none et toute interaction se fait avec l'étiquette

  • Le :after le pseudo-élément reçoit une coche unicode (\2714) mais cela peut également être coché avec une image d'arrière-plan.

  • Le bord dentelé causé par le rayon de la bordure peut être adouci par une couleur correspondante box-shadow. Le bord intérieur de la bordure semble bien lorsque l'image d'arrière-plan n'est pas un bloc de couleur uni.

  • Le transition: all 0.4s crée un fondu entrant/sortant doux pour la bordure.

J'ai ajouté plus de conseils dans les commentaires CSS.

Exemple complet

input[type=checkbox] {
  display: none;
}
/* 
- Style each label that is directly after the input
- position: relative; will ensure that any position: absolute children will position themselves in relation to it
*/

input[type=checkbox] + label {
  position: relative;
  background: url(http://i.stack.imgur.com/ocgp1.jpg) no-repeat;
  height: 50px;
  width: 50px;
  display: block;
  border-radius: 50%;
  transition: box-shadow 0.4s, border 0.4s;
  border: solid 5px #FFF;
  box-shadow: 0 0 1px #FFF;/* Soften the jagged Edge */
  cursor: pointer;
}
/* Provide a border when hovered and when the checkbox before it is checked */

input[type=checkbox] + label:hover,
input[type=checkbox]:checked + label {
  border: solid 5px #F00;
  box-shadow: 0 0 1px #F00;
  /* Soften the jagged Edge */
}
/* 
- Create a pseudo element :after when checked and provide a tick
- Center the content
*/

input[type=checkbox]:checked + label:after {
  content: '\2714';
  /*content is required, though it can be empty - content: '';*/
  height: 1em;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  color: #F00;
  line-height: 1;
  font-size: 18px;
  text-align: center;
}
<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>
42
misterManSam