Dernière mise à jour : juillet 2022
C'est un fait connu des développeurs, il n'est pas aisé de styliser en CSS des éléments de formulaire HTML.
En effet, comme il s'agit d'éléments remplacés, ils possèdent déjà des propriétés (et donc une apparence) ainsi que des pseudo-éléments propres à chaque navigateur.
Pourtant avec quelques astuces, vous allez vous rendre compte qu'il est tout à fait possible de réaliser de jolis rendus sans trop d'efforts.
Avant de voir les solutions à mettre en place, regardons de plus près comment le navigateur agit sur un simple champ texte. Nous allons comparer respectivement les navigateurs Chrome et Firefox en ouvrant l'outil de développement :
Nous pouvons noter quelques petites différences ; la taille de l'élément, la bordure, le rembourrage, la couleur de l'arrière-plan... Mais surtout, on remarque une similitude parmi d'autres, à savoir la propriété appearance dont la valeur est fixée à auto.
Mais avant d'approfondir cette propriété, nous allons voir comment uniformiser les champs de saisies sur les différents navigateurs (modernes).
Ce que l'on peut noter, en plus des petites différences entre navigateurs que nous avons évoquées précédemment, c'est que certaines propriétés doivent être définies, à savoir font-family et font-size. En effet, elles ne bénéficient pas de l'héritage du document.
.class-input{
font-size: inherit; /*on "force" la taille de police du document à être héritée-il faut définir une taille de police au préalable-vous pouvez aussi changer de taille*/
font-family: inherit; /*on "force" la police du document à être héritée-il faut définir une police au préalable-vous pouvez aussi changer de police*/
line-height: 1;
padding: 0 1em;
background-color: #fff;
border: 2px solid silver;
width: clamp(150px, 50%, 300px);
height: 2.25rem;
border-radius: 30px;
}
Et voici le résultat :
Nous laissons de côté pour l'instant l'accessibilité et ses subtilités. Nous y reviendrons en fin de tutoriel.
appearanceUn petit tour sur Can I use s'impose. Vous pouvez ainsi constater que cette propriété, déjà définie dans CSS2, puis retirée, pour être reprise ensuite dans une forme non officielle sur le navigateur Safari avec le préfixe -webkit-, ne bénéficie pas d'un très bon support.
A l'heure actuelle, cette propriété fait partie du module CSS Basic User Interface Level 4 (en brouillon) et semble poser quelques problèmes pour être normalisée, notamment le fait de pouvoir transformer n'importe quel élément en un autre élément.
Ce qu'il faut retenir, c'est qu'il est possible d'utiliser cette propriété mais celle-ci se limite à deux valeurs : auto et none. Celle-ci est surtout utile pour les cases à cocher ainsi que les boutons radio. Mais aussi pour faire disparaître certains pseudo-éléments.
Essayons maintenant avec un champ de type checkbox (case à cocher). Ci-dessous, par défaut, voici à quoi ressemble une cache à cocher :
Maintenant, utilisons cette fameuse propriété :
<input style="appearance:none" type="checkbox">
Le résultat est bien ce que nous attendons. La case à cocher est invisible à l'oeil nu. Il en va de même pour les boutons radio. En ce qui concerne l'élément select (voir exemple), il subsiste encore des propriétés.
Ci-dessous, un exemple de checkbox entièrement stylisé en CSS :
Vous trouverez sur ce blog d'autres manières de styliser des éléments input.
Les navigateurs utilisent des pseudo-éléments spécifiques à leur moteur de rendu. En ouvrant l'outil de développement, vous pouvez voir les différents pseudo-éléments que le navigateur utilise pour styler les éléments.
Pour activer la visualisation du Shadow DOM pour les fonctionnalités intégrées sur Firefox :
devtools.inspector.showUserAgentShadowRoots Après avoir relancé le navigateur, vous devriez voir ceci en prenant pour exemple un élément input de type date:
En ce qui concerne les navigateurs se basant sur Chromium (Chrome, Edge, Opera...) :
Cliquez sur l'icône Paramètres (ou faîtes F1)
Cherchez : Show user agent shadow DOM. Activez la fonctionnalité.
A présent, reprenons notre exemple de l'élément input date et personnalisons celui-ci avec les nouvelles informations que nous avons pu obtenir :
Comme je vous l'ai dit précédemment, chaque navigateur possède sa propre implantation (qui peut, par ailleurs, changer). Bien que l'élément se présente de la même manière sur Firefox et Chrome, vous noterez quelques petites différences. Sur firefox, une croix apparaît pour changer la date, tandis que sur Chrome, il n'y en a pas.
<input class=date type="date">
.date{
margin: 2rem auto;
display: flex;
border: 1px solid hsl(0 0% 20%);
position: relative;
overflow:hidden;
border-radius: .25rem;
padding: 1rem 3.5rem 1rem 0.75rem;
font-size: 1rem;
color:#555;
background: #fff url(calendrier.svg) right 9px center no-repeat; /*vous pouvez mettre l'image que vous souhaitez*/
cursor: pointer;
}
.date::-webkit-datetime-edit-month-field:focus,
.date::-webkit-datetime-edit-day-field:focus,
.date::-webkit-datetime-edit-year-field:focus,
.date::-webkit-datetime-edit-month-field:hover,
.date::-webkit-datetime-edit-day-field:hover,
.date::-webkit-datetime-edit-year-field:hover {
font-size: inherit;
color: currentColor;
background: hsl(248 78% 73%/.2);
}
::-webkit-datetime-edit-text {
opacity:0;
}
.date::-webkit-clear-button,
.date::-webkit-inner-spin-button {
display: none;
}
.date::-webkit-calendar-picker-indicator{
position:absolute;
width:36px;
height:100%;
top:0;
right:0;
bottom:0;
opacity:0;
cursor:pointer;
background:hsl(248 78% 73%);
}
.date:focus{
border-color:hsl(var(--couleur1)/.8);
box-shadow:0 0 0 0.25rem hsl(var(--couleur1)/.4);
}
.date:hover::-webkit-calendar-picker-indicator { opacity:0.05; }
.date:hover::-webkit-calendar-picker-indicator:hover { opacity:0.15; }
Vous pouvez trouver ici une liste (EN) qui répertorie les différents pseudo-éléments des différents navigateurs.
Si vous êtes pressé, que l'accessibilité n'est pas vraiment votre priorité, alors cette méthode va parfaitement vous convenir.
Il s'agit tout simplement de faire disparaître l'élément, et plus particulièrement les cases à cocher ainsi que les boutons radio, auquel vous souhaitez ajouter vos propres propriétés en déclarant comme ceci :
input[type="checkbox"]{
display: none
}
L'élément disparaît complètement. Il faudra, bien entendu, le faire réapparaître avec votre propre style. Cette solution est surtout utile si la propriété appearance n'est pas supportée, comme sur Internet Explorer par exemple.
Une autre méthode similaire consiste à faire disparaître les éléments de formulaire en utilisant la valeur unset avec la propriété all :
Cela aura pour conséquence de réinitialiser toutes les propriétés associées.
input,
select,
textarea,
button{
all: unset;
}
Pour une compatibilité maximale, il existe une méthode assez simple et qui fait ses preuves depuis très longtemps. Contrairement à display:none, un lecteur d'écran sera capable de comprendre qu'un élément intéractif est bien présent sur la page et pourra l'interpréter comme tel.
L'idée est de décaler l'élément de votre formulaire sur la gauche de l'écran comme ceci :
input[type="checkbox"]{
position: absolute;
left: -100vw
}
Votre élément est toujours présent dans le DOM mais hors écran. Et c'est compatible sur tout type d'écran et navigateur. Ne reste plus qu'à appliquer vos propres styles.
accent-colorVous en avez peut-être rêvé, après des heures à tenter de styliser vos formulaires, le cauchemar est enfin terminé. La propriété accent-color, dont le support est acceptable, permet de donner une couleur à un élément de formulaire (mais pas que) très simplement.
<label>
Exemple checkbox
<input type="checkbox">
</label>
<label>
Exemple radio
<input type="radio">
</label>
label{
display: flex;
align-items: center;
gap:1rem;
}
input{
height:30px;
width:30px;
accent-color:#6753ea /*la magie se passe ici !*/
}
L'accessibilité est primordiale dans un formulaire. C'est pourquoi on prendra soin dans un premier temps de toujours associer un label avec un input. Dans un second temps, ajouter un état de focus sera une plus-value pour vos utilisateurs.
<label for="nom">Votre nom</label>
<input id="nom" type="checkbox">
input {
--input-focus: 245 100% 42%;/*couleur du focus*/
font-size: inherit;
transition: 180ms box-shadow ease-in-out;
font-family: inherit;
font-size: inherit;
color: black;
padding: 0.25em 0.5em;
background-color: #fff;
border: 2px solid silver;
width: clamp(150px, 50%, 300px);
height: 2.25rem
}
input:focus {
border-color: hsl(var(--input-focus));
box-shadow: 0 0 0 3px hsl(245 100% calc(42% + 40%)/ .8);
outline: 3px solid transparent;
}
Ci-dessous, un formulaire responsive et surtout accessible :
Plus d'informations au sujet de l'accessibilité (EN).
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.