Rappel sur le style

© Christian PAULUS. Document créé le 14 avril 2005 , mis à jour le 13 mars 2007.

L'homme qui ne tente rien ne se trompe qu'une fois. Lao-Tseu

Accueil du site > Astuces > CSS > Rappel sur le style

CSS / CSS 2

Les boutons de vos formulaires peuvent prendre divers aspects. En plus de préciser l’épaisseur en pixels ou autres mentions numériques, il est plus parfois plus pratique d’utiliser les mentions standards. Petit rappel :

- Mentions concernant l’épaisseur de la bordure : thin (fine), medium (moyenne), thick (épaisse).
- Mentions concernant le style de bordure : none (pas de bordure), hidden (pas de bordure ou bordure transparente), dotted (pointillée), dashed (tirets), solid (pleine), double (double et pleine), groove (en relief), ridge (effet 3D), inset (rentrante), outset (sortante).

Vous pouvez donc forcer le style d’un bouton, soir par une feuille de style, soit en appliquant directement le style dans la balise input. Par exemple, pour avoir un bouton dont le bord est composé d’un filet épais en pointillé, la ligne XHTML ressemblera à :

<input style="border: thin none;" name="" type="button" value="Test" />

Voici donc un exemple pour chacune de ces mentions. Vérifiez le résultat sur vos navigateurs préférés, vous serez parfois surpris du résultat :

style="border: thin none;" style="border: medium none;" style="border: thick none;"
style="border: thin hidden;" style="border: medium hidden;" style="border: thick hidden;"
style="border: thin dotted;" style="border: medium dotted;" style="border: thick dotted;"
style="border: thin dashed;" style="border: medium dashed;" style="border: thick dashed;"
style="border: thin solid;" style="border: medium solid;" style="border: thick solid;"
style="border: thin double;" style="border: medium double;" style="border: thick double;"
style="border: thin groove;" style="border: medium groove;" style="border: thick groove;"
style="border: thin ridge;" style="border: medium ridge;" style="border: thick ridge;"
style="border: thin inset;" style="border: medium inset;" style="border: thick inset;"
style="border: thin outset;" style="border: medium outset;" style="border: thick outset;"

Plussoyez !

Les forums sont fermés.