ALL HTML - Formulaires et CSS

retour

Formulaires et CSS

Article publié le dimanche 13 mars 2005 par ALL HTML.
Cet article est classé dans les catégories « CSS »

Nous allons voir dans ces différents exemples, qu'à l'aide des feuilles de styles, on peut aisément redéfinir tous les éléments d'un formulaire... Il suffit dans la plupart des cas de redéfinir les balises propres à un formulaire ou de spécifier l'attribut style.

Exemple avec une feuille de style

Insérer entre les balises <head> et </head> cette feuille de style qui redéfinira la balise input sur la totalité de votre document.


<style type="text/css">
<!--
  input
  {
    color:#cc0000;
    background-color:#ccccff;
    font-size:11px;
    font-family:Arial;
    font-weight: bold;
  }
-->
</style>

ou avec l'attribut style


<input type="text" style="font-family:Arial; font-size:11px; color:#330099; background-color:#ccccff; font-weight:bold" name="texte" value="Texte ici" size="20" maxlength="30" />

Exemple avec un bouton


<input style="font-family:Verdana; font-size:10px; color:#ff0000; background-color:#ff9900; font-weight:bold" type="submit" value="Envoyer" />

Exemple avec une liste


<select name="exemple" style="font-family:Verdana; font-size:10px">
  <option value="choix1" style="color:#000066; background-color:#99ffff">Choix 1</option>
  <option value="choix2" style="color:#ffffff;background-color:#339900">Choix2</option>
  <option value="choix3" style="color:#000000;background-color:#ffff33">Choix 3</option>
</select>

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le jeudi 27 avril 2006 - 15h08 par Blaise: Il aurait peut-être mieux valu préciser l'utilisation des 'id' et des 'class' pour personnaliser la mise en forme depuis un document externe (ce qui est quand même le but des css) surtout dans l'exemple du select.
Et peut-être aussi préciser que les boutons sont aussi des 'input' donc que sans classe spéciale ppour ceux-ci ils subissent les mêmes parmètres que pour les champs textes..

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans notre forum XHTML - HTML - CSS.

05/02/2012 - 18h53 fenetre popup (4 réponses)
31/01/2012 - 20h36 Cherche scripts pour réaliser un battement de coeur (2 réponses)
31/01/2012 - 10h57 mon background cache tous mon site (1 réponse)
30/01/2012 - 12h23 Ouverture 2 pages dans 2 frames (2 réponses)
29/12/2011 - 09h41 Mise en page de blocs IE inférieur à 7 (0 réponse)

all html : Le portail des webmaster

Formulaires et CSS

VOS COMMENTAIRES ...

Forums de discussions associés