Blog d'un passionné du web (Symfony2, HTML5, Sass, Gulp…)

Mon site freelance
Mon Facebook - Mon Twitter

Styliser ses checkbox en CSS … proprement

La mauvaise façon de personnaliser ses checkboxs

Personnaliser ses checkboxs n’a rien de bien compliqué, une petite recherche Google et le tour et joué … oui mais les tutos présentent le plus souvent un hack bien connu mais pas franchement au top. En effet bien souvent la technique consiste à faire disparaître la case à cocher ( position :absolute; left:-5000px; ). Bref la technique fonctionne mais ce genre de manipulation est à mon sens dangereux (risque de faire disparaître la checkbox à l’utilisateur) et inutile !

Styliser ses checkbox en css 3

Personnaliser ses checkboxs en CSS 3

Voici une facçon un peu plus moderne afin de faire de belles checkbox. De mon point de vu le mieux est de rester assez proche du rendu standard afin de ne pas perturber vos utilisateurs. Et oui l’expérience utilisateur c’est important !
Commençons tout d’abord par ne pas afficher le style par défaut du navigateur :


input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
}

Ensuite il suffit d’appliquer son propre style à la case à cocher :


input[type=checkbox] {
    -border-radius: 4px;
    height: 15px;
    width: 15px;
    background: #fff;
    border: 1px solid #ccc;
}

…. et quand la case est cochée


input[type="checkbox"]:checked {
  background: yellow;
  margin:0px;
  position: relative;
  &:before {
    font-family: FontAwesome;
    content: '\f00c';
    display: block;
    color: grey;
    font-size: 13px;
    position: absolute;
  }
}

Evidemment le code ci-dessus est à adapter à vos besoins et à votre goût.
Enjoy !

10 mai 2016


Previous Post

Next Post