Dans l'article précédent, nous avons vu que la mise en forme des contrôles de formulaire provenait historiquement du système d'exploitation sous-jacent, ce qui explique en partie la difficulté à personnaliser l'aspect de ces contrôles.
La propriété
appearance
a été créée comme une méthode pour contrôler les styles provenant du système d'exploitation et qui étaient appliqués aux contrôles de formulaire. Malheureusement, le comportement de cette propriété avec les implémentations initiales variait grandement d'un navigateur à l'autre, elle n'était donc que peu utilisable. Les implémentations plus récentes sont plus cohérentes et les différents navigateurs (que ce soit ceux basés sur Chromium comme Chrome, Opera, et Edge ; Safari ; et Firefox) prennent en charge la version préfixée avec
-webkit-
(
-webkit-appearance
).
Si on consulte la page de référence, on verra que
-webkit-appearance
peut prendre de nombreuses valeurs différentes. Toutefois, la valeur la plus utile et celle que vous utiliserez probablement est
none
. Cela empêche, autant que possible, l'utilisation des styles provenant du système, vous permettant ainsi de construire vos propres styles avec CSS.
Prenons l'exemple suivant avec ces différents contrôles :
<form>
<label for="search">search:</label>
<input id="search" name="search" type="search" />
<label for="text">text:</label>
<input id="text" name="text" type="text" />
<label for="date">date:</label>
<input id="date" name="date" type="datetime-local" />
<label for="radio">radio:</label>
<input id="radio" name="radio" type="radio" />
<label for="checkbox">checkbox:</label>
<input id="checkbox" name="checkbox" type="checkbox" />
<p><input type="submit" value="submit" /></p>
<p><input type="button" value="button" /></p>
</form>
Appliquer la règle CSS suivante permettra de retirer la mise en forme provenant du système.
input {
-webkit-appearance: none;
appearance: none;
Note :
Mieux vaut utiliser les deux déclarations (celle avec le préfixe et celle sans) lorsqu'on utilise une propriété préfixée. En effet, la version préfixée signifie généralement que du travail de standardisation est en cours et qu'il pourrait y avoir plus tard un consensus pour abandonner la version préfixée. Dans l'exemple qui précède, on se prémunit ainsi contre une telle situation.
L'aperçu qui suit montre : le rendu avec les styles système à gauche et le rendu avec appearance: none à droite (vous pouvez également voir cet exemple sur cette page si vous voulez le tester sur d'autres systèmes).
Dans la plupart des cas, l'effet correspond au retrait de la mise en forme de la bordure, ce qui rend l'application de CSS plus simple, mais ce n'est pas réellement essentiel. Pour d'autres en revanche, comme les champs de recherche, les boutons radio et les cases à cocher, cela s'avère beaucoup plus utile. Voyons de quoi il en retourne.
