FAQ CSS : Formulaire

Page d'introduction

Introduction

Que vais je trouver?

Vous trouverez diverses questions sur les feuilles de style css, pour la présentation des éléments de formulaires input, textarea...
Descendre
Remonter

La couleur de fond des champs

Explication

Vous pouvez en feuille de style css spécifier la couleur de fond d'un élément de formulaire. Pour cela vous devez utiliser la feuille de style css background qui permet de spécifier plusieurs autres propriétés notamment une image de fond.
Exemple de code :
background:red;
Vous pouvez aussi spécifier la couleur de fond d'un élément de formulaire en utilisant la feuille de style css background-color
Exemple de code :
background-color:blue;

Script CSS :
Exemple de code :
<style>
  .maclass{background-color:#800000;}
</style>
Code HTML ou XHTML:
Exemple de code :
<input type="text" name="aliasdmc" value="valeur" class="maclass">

background
background-color
Descendre
Remonter

Modifier les bordures des champs

Explication

Vous pouvez en feuille de style css spécifier l'aspect des bordures d'un élément de formulaire. Pour cela vous devez utiliser la feuille de style css border qui permet de spécifier plusieurs propriétés largeur de la bordure, le style de la bordure, couleur de la bordure.
Exemple de code :
border: 1px solid red;
Vous pouvez aussi spécifier individuellement chaque propriété de bordure d'un élément de formulaire en utilisant la feuille de style css border-bottom, border-style.
Exemple de code :
background-color:blue;

Script CSS :
Exemple de code :
<style>
  .maclass{background-color:#800000;}
</style>
Code HTML ou XHTML:
Exemple de code :
<input type="text" name="aliasdmc" value="valeur" class="maclass">

border
border-color
border-style
border-width
border-bottom
border-bottom-width
border-bottom-color
border-left
border-left-width
border-left-color
border-right
border-right-width
border-right-color
border-top
border-top-width
border-top-color
Descendre
Remonter

Changer la police des champs

Explication

Vous pouvez en feuille de style css spécifier la police aussi que la décoration d'un élément de formulaire. Pour cela reportez vous au chapitre Décoration du texte et au chapitre Couleur et fond.
Script CSS :
Exemple de code :
<style>
  .maclass{font-family:Times; color:red;}
</style>
Code HTML ou XHTML:
Exemple de code :
<input type="text" name="aliasdmc" value="valeur" class="maclass">

font
font-size
color
font-family
text-decoration
font-weight
font-style
Descendre
Remonter

Aspect différent pour chaque option d'un menu déroulant

Explication

Pour modifier l'aspect des balises OPTION d'une balise HTML ou XHTML SELECT rien de plus facile, plusieurs cas sont possibles.
Toutes les options du site ont le même aspect :
Exemple de code :
option{
/*propriétés css*/
}

Les options d'un select précis ont le même aspect :
Exemple de code :
.dmcderoulant option{
/*propriétés css*/
}
<select name="dmc" class="dmcderoulant">
  <option value="Option">Option</option>
</select>

Les options d'un select précis ont un aspect différent :
Exemple de code :
.dmcoption{
/*propriétés css*/
}
.dmcoptiona{
/*propriétés css*/
}
<select name="dmc">
  <option value="Option" class="dmcoption">Option</option>
  <option value="Option" class="dmcoptiona">Option</option>
</select>
Descendre
Remonter

Changer l'aspect de barre de défilement

Explication

Vous pouvez en feuille de style css spécifier l'aspect des barres de défilement d'une balise HTML XHTML TEXTAREA. Pour cela vous devez utiliser la feuille de style css ci-dessous.
Je précise qu'à ce jour, il est impossible de modifier spécifier l'aspect des barres de défilement d'une balise HTML XHTML SELECT.
scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-track-color
Descendre
Remonter

La balise HTML et XHTML OPTION permet de définir une OPTION dans un menu.<OPTION> </OPTION> La balise HTML et XHTML OPTION se trouve placée à l'intéri...[Voir]La balise HTML et XHTML SELECT contient une liste d'options. La balise HTML et XHTML SELECT permet de créer un menu déroulant dans un formulaire.<SELE...[Voir]La balise HTML et XHTML TEXTAREA définit un champ de texte multiligne où une personne peut taper du texte.TEXTAREA /TEXTAREA La balise HTML et XHTML...[Voir]La propriété de feuille de style FONT-FAMILY css permet de spécifier la police (fonte) du texte.font-family : Times New Roman, Times, serif; La propri...[Voir]La propriété de feuille de style css FONT-STYLE permet de spécifier le style du texte, c'est à dire tout ce qui concerne l'inclinaison (italique) de l...[Voir]La propriété de feuille de style css FONT permet de spécifier le style : taille, épaisseur et la police (font),...font : 14px Arial, Helvetica, sans-s...[Voir]La propriété de feuille de style css SCROLLBAR-FACE-COLOR permet de spécifier la couleur d'une scrollbar ou barre de défilement.body { scrollbar-face...[Voir]La propriété de feuille de style css FONT-WEIGHT permet de spécifier la graisse de la fonte (mettre en gras).font-weight:bold; font-weight:800; La pro...[Voir]La propriété de feuille de style css FONT-SIZE permet de spécifier la taille de la fonte ou police.font-size:XX-small; font-size:15px; La propriété fe...[Voir]La propriété de feuille de style COLOR css permet de spécifier la couleur d'un texte..identifiant{ color:#ffffff; } La propriété de feuille de style...[Voir]La propriété de feuille de style css BACKGROUND-COLOR permet de spécifier la couleur de l'arrière plan (couleur de fond) d'un élément HTML ou XTHML.ba...[Voir]La propriété de feuille de style css BACKGROUND permet de gérer un ensemble de propriétés d'arrière plan (fond) en une seule fois. .identifiant{ back...[Voir]La propriété de feuille de style css TEXT-DECORATION permet de spécifier les décorations d'un mot par exemple si le mot est souligné ou surligné..iden...[Voir]La propriété de feuille de style css BORDER-TOP-WIDTH permet de spécifier l'épaisseur de la bordure haute d'un élément.identifiant{ BORDER-TOP-WIDTH ...[Voir]La propriété css BORDER-RIGHT-WIDTH permet de spécifier l'épaisseur de la bordure droite d'un élément.identifiant{ BORDER-RIGHT-WIDTH : 1px; } La pro...[Voir]La propriété de feuille de style css BORDER-BOTTOM-WIDTH permet de spécifier l'épaisseur de la bordure basse d'un élément. identifiant{ border-bottom...[Voir]La propriété de feuille de style css BORDER-LEFT-WIDTH permet de spécifier l'épaisseur de la bordure gauche d'un élément. identifiant{ border-left-wi...[Voir]La propriété de feuille de style css BORDER-WIDTH permet de spécifier l'épaisseur des quatre bordures d'un élément..identifiant{ BORDER-WIDTH : 1px; ...[Voir]La propriété de feuille de style css BORDER-BOTTOM permet de spécifier le style, l'épaisseur et la couleur de la bordure basse d'un élément. .identifi...[Voir]La propriété de feuille de style css BORDER-LEFT permet de spécifier le style, l'épaisseur et la couleur de la bordure gauche d'un élément..identifian...[Voir]La propriété de feuille de style css BORDER-COLOR permet de spécifier la couleur des quatre bordures d'un élément..identifiant{ BORDER-COLOR : red; }...[Voir]La propriété de feuille de style css BORDER-STYLE permet de spécifier le style de la bordure d'un élément.identifiant{ BORDER-STYLE : solid; } La pro...[Voir]La propriété de feuille de style css BORDER-TOP permet de spécifier le style, l'épaisseur et la couleur de la bordure haute d'un élément. .identifiant...[Voir]La propriété de feuille de style css BORDER-RIGHT permet de spécifier le style de la bordure droite, l'épaisseur de la bordure droite et la couleur de...[Voir]La propriété de feuille de style css SCROLLBAR-TRACK-COLOR permet de spécifier la couleur de l'arrière plan d'une scrollbar ou barre de défilement. bo...[Voir]La propriété de feuille de style css SCROLLBAR-3DLIGHT-COLOR permet de spécifier la couleur du relief dans la lumière d'une scrollbar ou barre de défi...[Voir]La propriété de feuille de style css SCROLLBAR-DARKSHADOW-COLOR permet de spécifier la couleur du relief dans l'ombre d'une scrollbar ou barre de défi...[Voir]La propriété de feuille de style css BORDER permet de spécifier en une seule déclaration les propriétés des quatre bordures d'un élément.identifiant{ ...[Voir]La propriété de feuille de style css BORDER-TOP-COLOR permet de spécifier la couleur de la bordure haute d'un élément. identifiant{ border-top-color...[Voir]La propriété de feuille de style css BORDER-BOTTOM-COLOR permet de spécifier la couleur de la bordure basse d'un élément. identifiant{ border-bottom-...[Voir]La propriété de feuille de style css BORDER-LEFT-COLOR permet de spécifier la couleur de la bordure gauche d'un élément. identifiant{ border-left-col...[Voir]La propriété de feuille de style css BORDER-RIGHT-COLOR permet de spécifier la couleur de la bordure droite d'un élément. identifiant{ border-right-...[Voir]