Requis : Premium, CSS. Ne fonctionne pas sous Internet Explorer (<=7)

Pour modifier les propriétés d'un élément lorsqu'il "reçoit le focus", par exemple lorsque vous avez cliqué sur un champ de saisie de texte avec la souris, on utilise la pseudo-classe dynamique :focus.

Sur Cowblog, trois types de pages utilisent des champs de saisie :

  • les pages "articles" (tagboard et recherche sur le blog)
  • la page "article avec commentaires" ou le popup de commentaires
  • la page "Lui écrire"

On peut définir les propriétés de tous les champs de saisie d'un blog en utilisant les classes :

  • textarea : texte du tag, des critères de recherche sur le blog, pseudonyme, mot de passe, adresse du blog, question anti-spam, email des commentaires
  • commentarea : texte du commentaire et du message ("Lui écrire")

Pour mieux comprendre, collez à la fin de votre feuille CSS :

et cliquez sur les différents champs de saisie du blog.

On peut vouloir attribuer des propriétés différentes selon les "parties".

Il est même possible de définir distinctement les champs de saisie du formulaire de commentaire :

Démo

Rien ne vous empêche de définir d'autres propriétés pour ces champs (taille, couleur du texte, etc.) ou d'utiliser des images en fond.

Publié par Sakatruc le 11 mai 2008 à 15:39

Classé dans CSS | 4 commentaires

Tags :

Par mytiktime le 11 mai 2008 à 22:16
Merci pour l'astuce, c'est vrai que ça ajoute un bel effet sur les champs de saisie. J'imagine qu'on peut adapter cette méthode pour faire la même chose avec la bordure de ces champs; me trompe-je ? :D
Par LateLament le 12 mai 2008 à 1:53
Bordure, taille, espacement intérieur/extérieur, couleur de la police...

L'objectif de l'article était aussi de donner les identifiants et classes permettant de modifier les propriétés de chaque champ :)

A suivre : les boutons...
Par Etre le 21 mai 2008 à 3:33
Le spam est revenu ?

Merci pour cette astuce ! =) J'aime beaucoup !
Par pand0ra le 26 mai 2008 à 18:28
Merci ça rajoute de la personnalisation, du moins pour ceux qui ont Mozilla, sans vraiment pénaliser les utilisateurs d'Internet Explorer.
 

Ajouter un commentaire

Note : Sakatruc n'accepte que les commentaires des personnes possédant un compte sur Cowblog : vous devez obligatoirement être identifié pour poster un commentaire.









Commentaire :








Votre adresse IP sera enregistrée pour des raisons de sécurité.
 

La discussion continue ailleurs...

Pour faire un rétrolien sur cet article :
http://sakatruc.cowblog.fr/trackback/2556890

 
Créer un podcast