Entrées de formulaire de style personnalisé avec des fonctionnalités CSS modernes

De nos jours, la construction de cases à cocher personnalisées, des boutons radio et des interrupteurs à bascule est parfaitement possible, tout en maintenant la sémantique et l'accessibilité. Nous n'avons même pas besoin d'une ligne de code JavaScript ou d'éléments HTML supplémentaires! En fait, c'est plus facile ces derniers temps que par le passé. Voyons.

L'effet final est le suivant:

Les choses sont beaucoup plus faciles qu'avant!

La raison en est que nous pouvons enfin<input> ::before et ::after des pseudo-éléments de la balise elle-même sont stylisés. Cela signifie que nous pouvons garder et régler<input> style sans éléments supplémentaires. Auparavant, nous devions compter sur plus<div> ou<code><span></span> pour implémenter la conception personnalisée.

Jetons un coup d'œil au code HTML

Il n'y a rien de spécial ici. Nous avons juste besoin d'utiliser ce code HTML pour styliser l'entrée:

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

Il s'agit de la partie HTML. Bien sûr, il est recommandé d'ajouter des attributs name et id , ainsi que des attributs correspondants<label></label> élément:

 <label for="c1">Cocher</label>
<input type="checkbox" id="c1">

<label for="r1">Bouton radio</label>
<input type="radio" id="r1">

<label for="s1">changer</label>
<input type="checkbox" id="s1" class="switch">

Démarrer les styles de définition

Tout d'abord, nous vérifions la prise en charge de appearance: none; y compris sa version de préfixe. appearance est la clé car il est conçu pour supprimer le style par défaut du navigateur de l'élément. Si le navigateur ne prend pas en charge cette propriété, le style ne s'applique pas et le style d'entrée par défaut sera affiché. C'est absolument bien et est également un bon exemple d'amélioration progressive.

 @Supports (-Webkit-Apparent: Aucun) ou (-moz-apparence: Aucun) {
  entrée [type = 'Checkbox'],
  entrée [type = 'radio'] {
    -Webkit-apparence: aucun;
    -Moz-apparence: aucun;
  }
}

Pour l'instant, appearance est toujours dans la phase de travail de travail, mais voici le soutien:

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette versions et ultérieures.

Bureau

Mobile / tablette

Comme les liens, nous devons considérer les différents états d'interaction des éléments de forme. Nous considérons ces états lors de la définition des styles d'élément:

• :checked
• :hover
• :focus
• :disabled

Par exemple, voici comment styliser notre entrée pour basculer, créer des boutons et considérer :checked :

 / * Commutateur Container * /
.changer {
  Largeur: 38px;
  Border-Radius: 11px;
}

/ * Switch Bouton * /
.Switch :: After {
  Gauche: 2px;
  En haut: 2px;
  Border-Radius: 50%;
  Largeur: 15px;
  hauteur: 15px;
  Contexte: var (- ab, var (- bordure));
  transform: tradlatex (var (- x, 0));
}

/ * Modifier la couleur et la position lorsqu'il est sélectionné * /
.Switch: vérifié {
  --AB: var (- actif-inner);
  --x: 17px;
}

/ * Réduisez l'opacité du bouton de bascule lorsque l'entrée est désactivée * /
.Switch: Désvable: pas (: vérifié) :: après {
  Opacité: .6;
}

nous allons<input> Les éléments sont utilisés comme conteneurs. Le bouton à l'intérieur de l'entrée est créé avec le ::after pseudo-élément. Encore une fois, aucun marquage supplémentaire n'est nécessaire!

Si vous ouvrez le style dans la démo, vous verrez que nous définissons certaines propriétés personnalisées CSS, car cela est devenu un excellent moyen de gérer des valeurs réutilisables dans la feuille de style:

 @Supports (-Webkit-Apparent: Aucun) ou (-moz-apparence: Aucun) {
  entrée [type = 'Checkbox'],
  entrée [type = 'radio'] {
    --active: # 275EFE;
    --active-inner: #FFF;
    - Focus: 2px RGBA (39, 94, 254, .25);
    - Border: # BBC1E1;
    --Border-Hover: # 275EFE;
    - Background: #FFF;
    - Diagré: # f6f8ff;
    --insembaled-inner: # e1e6f9;
  }
}

Mais il y a une autre raison pour laquelle nous utilisons des propriétés personnalisées - elles sont très adaptées à la mise à jour des valeurs en fonction de l'état d'un élément! Nous n'entrerons pas dans les détails ici, mais ce qui suit est un exemple de la façon d'utiliser des propriétés personnalisées en fonction de différents états.

 / * valeur par défaut * /
entrée [type = 'Checkbox'],
entrée [type = 'radio'] {
  --active: # 275EFE;
  - Border: # BBC1E1;
  Border: 1px Solid Var (- BC, var (- bordure));
}

/ * Réécrivez la valeur par défaut * /
entrée [Type = 'Checkbox']: coché,
entrée [type = 'radio']: vérifié {
  --b: var (- actif);
  --BC: var (- actif);
}

/ * Si elle n'est pas sélectionnée et non désactivée, une autre couleur de bordure est appliquée lors de la volonté * /
entrée [type = 'Checkbox']: non (: coché): non (: désactivé): en survol,
entrée [type = 'radio']: non (: vérifié): non (: désactivé): Hover {
  --BC: var (- border-hover);
}

Pour l'accessibilité, nous devons ajouter des styles de mise au point personnalisés. Nous avons supprimé le contour par défaut car il ne peut pas être arraché comme le reste du style que nous avons défini. Cependant, box-shadow avec des coins arrondis peut créer un style d'angle arrondi qui fonctionne comme un contour.

 entrée [type = 'Checkbox'],
entrée [type = 'radio'] {
  - Focus: 2px RGBA (39, 94, 254, .25);
  Aperçu: aucun;
  transition: box-shadow .2s;
}

entrée [Type = 'Checkbox']: Focus,
entrée [type = 'radio']: focus {
  Box-shadow: 0 0 0 var (- focus);
}

Vous pouvez également aligner et définir directement pour suivre HTML<input> Élémentaire<label></label> Style d'élément:

 <label for="c1">Cocher</label>
<input type="checkbox" id="c1">

Étiquette d'entrée [type = 'Checkbox'],
entrée [type = 'radio'] label {
  Affichage: bloc en ligne;
  Aligne verticale: haut;
  / * Autres styles * /
}

entrée [type = 'Checkbox']: étiquette désactivée,
entrée [type = 'radio']: étiquette désactivée {
  curseur: non allongé;
}

Montrez à nouveau la démo:

J'espère que vous pourrez voir à quel point il est pratique de créer des styles de formulaire personnalisés ces jours-ci. Il nécessite moins de balisages en raison des pseudo-éléments directement sur l'entrée de formulaire. Il nécessite moins de commutateurs de style en raison de propriétés personnalisées. Et grâce à @supports il a un assez bon support de navigateur.

Dans l'ensemble, c'est bien mieux que l'expérience de développement que nous avons dû faire face dans le passé!