Formulaire - FAQ CSS

Vous pouvez en feuille de style Css spécifier la couleur de fond ou une image d'arrière-plan sur un élément de formulaire. Pour cela vous devez utiliser les feuille de style Css de type background qui permettent de gérer le fond.
Je vous invite à aller voir la Faq dédiée aux arrières-plans pour en savoir plus.

<style>
  .maclass{ background-color : #800000;}
</style>
<input type="text" name="aliasdmc" value="valeur" class="maclass">

Vous pouvez en feuille de style Css spécifier la couleur, l'épaisseur ou le style des bordures d'un élément de formulaire. Pour cela vous devez utiliser les feuilles de style Css de type border. Je vous invite à aller voir la Faq dédiée aux bordures pour en savoir plus.

<style>
  .ma_bordure{
    border : none;
    border-bottom  : 2px solid gray;  
  }
  .ma_bordure:focus{ border-bottom-color : green; }
</style>
<label for="ma_bordure">Mon label</label>
<input name="mon_champ" type="text" value="" class="ma_bordure" id="ma_bordure">

Exemple de changement de bordure avec :focus :

Les value des champs input type="text" et la valeur des textarea, les options sont des textes qui peuvent être stylisés en Css.
Vous pouvez en feuille de style Css spécifier la police et la couleur, aussi que la décoration du texte. Il est accepté aussi de faire des alignements.

<style>
  .maclass{ font-family : Times; color : red; } 
</style>
<input type="text" name="aliasdmc" value="valeur" class="maclass">

Il n'est pas possible de mettre une bordure a un input type="radio" ou à input type="checkbox".
Une solution, peut être l'utilisation les feuilles de style Css de type outline.
Voir un exemple de bordure de type outline

Certains navigateurs donnent la possibilité en feuille de style Css de spécifier l'aspect des barres de défilement (scrollbar) 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.

Pour modifier l'aspect d'une balise de formulaire quand le souris passe sur la balise, vous devez utiliser la feuille de style Css :hover.

selecteur-css:hover{
  /*propriétés Css*/
}

Pour modifier l'aspect d'une balise de formulaire quand elle a le focus, vous devez utiliser la feuille de style Css :focus.

selecteur-css:focus{
  /*propriétés Css*/
}

Il est important déclarer d'abord les propriétés pour :hover puis :focus. L'ordre est important dans la notion d'héritage et de plus c'est ce que conseille le W3C.

<style>
.focus_et_hover:hover{ border : 1px solid green }
.focus_et_hover:focus{ color:red }
</style>
<label for="focus_et_hover">Mon label</label>
<input name="mon_champ" type="text" value="Exemple :focus et :hover" class="focus_et_hover" id="focus_et_hover">

Exemple d'utilisation du sélecteur :hover et :focus :

Certains navigateurs acceptent que le texte affiché de l'attribut placeholder soit stylé.
Pour cela, vous devez utiliser le pseudo-élément Css placeholder et ses formes préfixées.

<style>
  .mon_placeholder:-ms-input-placeholder{ color:green }
  .mon_placeholder::-moz-placeholder{ color:green }
  .mon_placeholder::-webkit-input-placeholder,
  .mon_placeholder::placeholder{ color:green }
</style>
<label for="mon_champ">Mon label</label>
<input name="mon_champ" type="text" value="">

Exemple du changement de couleur du placeholder :

Je ne reviendrais pas sur les sélecteurs Css classiques comme :

• assignation de Css par id
• assignation de Css par class
• assignation de Css par type
• etc...

<style>
  label[for=mon_champ]{ color : green }
  input[name=mon_champ]{ border : 1px solid green }
</style>
<label for="mon_champ">Mon label</label>
<input name="mon_champ" type="text" value="" id="mon_champ">

Exemple d'utilisation du sélecteur d'attribut name et for :

Certain navigateurs, quand on clique dans le champ du formulaire affiche un contour bleu autour du champ.
Pour supprimer ou changer cet effet de contour bleu, vous devez les propriétés d'outline.
Cependant, pour l'accessibilité, vous devez faire en sorte que l'aspect du champ à la prise de focus soit visuellement différent de l'aspect initial du champ.

<style>
.mon_countour_bleu{ border : 1px solid gray; outline :none}
.mon_countour_bleu:focus{ border-color :green }
</style>
<label for="mon_countour_bleu">Mon label</label>
<input name="mon_champ" type="text" value="" id="mon_countour_bleu" class="mon_countour_bleu">

Exemple de suppression du contour bleu autour du champ de formulaire: