Définir le style de tous les formulaires de votre page :
- Code: Tout sélectionner
<HEAD><STYLE TYPE="text/css">
<!--
INPUT {
color:#CC0000;
background-color:#FFCC00;
font-size:10px;
font-family:arial;
}
SELECT {
color:#CC0000;
background-color:#FFCC00;
font-size:10px;
font-family:arial;
}
-->
</style>
</HEAD>
Définir un type d'affichage par champ :
Exemple :
- Code: Tout sélectionner
<INPUT TYPE=text NAME=test SIZE=20 MAXLENGTH=40 VALUE="C'est un essai" STYLE="color:#FFFFFF;background-color:#000099">
Le style est defini dans la balise de l'element. Cet exemple donne :
C'est un essai
A partir de lĂ , toutes les fantaisies sont possibles. Vous pouvez mĂŞme aller jusqu'Ă definir une couleur pour chaque element d'un SELECT. Exemple :
- Code: Tout sélectionner
<SELECT NAME=couleur>
<OPTION VALUE="Blanc" STYLE="color:#000000;background-color:#FFFFFF"> Blanc
<OPTION VALUE="Rouge" STYLE="color:#FFFFFF;background-color:#CC0000"> Rouge
<OPTION VALUE="Vert" STYLE="color:#FFFFFF;background-color:#336633"> Vert
<OPTION VALUE="Gris" STYLE="color:#FFFFFF;background-color:#868486"> Gris
<OPTION VALUE="Bleu" STYLE="color:#FFFFFF;background-color:#336699"> Bleu
<OPTION VALUE="Noir" STYLE="color:#FFFFFF;background-color:#000000"> Noir
</select>
Les options possibles :
Voici une liste d'attributs qui vont modifier l'apparence de vos formulaires :
color : Change la couleur du texte du champ. Exemple : color:#CC0000
background-color : Change la couleur du fond du champ. Exemple : background-color:#FFCC00
font-size : Change la taille de la police. Exemple : font-size:12px
font-family : Change la police. Exemple : font-family:arial
font-weight : Pour changer la largeur des caractères. Exemple font-weight:bold
border-width : Pour changer la bordure du champ. Exemple : border-width:1px
height : Pour changer la hauteur. Exemple : height:20px
width : Pour changer la largeur du champ. Exemple : width:120px
text-align : Pour aligner le texte dans le champ. Exemple : text-align:center
border-color : Pour changer la couleur de la bordure. Par exemple : border-color:#000000
