Changer l'apparence d'un élément en CSS3

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Changing Appearance Of Element With CSS.

Chaque navigateur possède ses propres styles par défaut. Par exemple un bouton sous Chrome n'aura pas le même style qu'un bouton sous Internet Explorer.

Pour pouvoir manipuler ces styles par défaut, il faut utiliser la propriété CSS3 -appearance. Grâce à cette propriété, vous pouvez appliquer un style par défaut à n'importe quel élément HTML. Vous pouvez par exemple donner à un lien <a> le style d'un bouton, ou encore faire en sorte qu'un paragraphe ressemble à une textbox.

Cette propriété est actuellement supportée par les navigateurs Webkit et Firefox, vous avez donc besoin de préfixer la propriété dans votre code CSS.

Il existe un grand nombre de style par défaut. Nous n'allons nous intéresser qu'à certain d'entre eux pour l'exemple.

.lookLikeAButton{
     -webkit-appearance:button;
     -moz-appearance:button;
}
.lookLikeAListbox{
     -webkit-appearance:listbox;
     -moz-appearance:listbox;
}
.lookLikeAListitem{
     -webkit-appearance:listitem;
     -moz-appearance:listitem;
}
.lookLikeASearchfield{
     -webkit-appearance:searchfield;
     -moz-appearance:searchfield;
}
.lookLikeATextarea{
     -webkit-appearance:textarea;
     -moz-appearance:textarea;
}
.lookLikeAMenulist{
     -webkit-appearance:menulist;
     -moz-appearance:menulist;
}

Puis vous pouvez utiliser ces classes CSS dans votre page HTML.

<p class="lookLikeAButton">This is a paragraph
<p class="lookLikeAListbox">This is a paragraph
<p class="lookLikeAListitem">This is a paragraph
<p class="lookLikeASearchfield">This is a paragraph
<p class="lookLikeATextarea">This is a paragraph
<p class="lookLikeAMenulist">This is a paragraph

Nous avons vu dans ce tutoriel comment changer l'apparence d'éléments HTML en utilisant les styles par défaut de chaque navigateur.

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

Vous pouvez également consulter la liste des éléments impactés par la propriété -appearance.

Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également Torgar pour sa relecture orthographique.