Personnalisation du widget Zone de texte de validation



Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Zone de texte de validation, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Zone de texte de validation de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytextarea_custom_fr.

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationTextArea.css. Dreamweaver enregistre le fichier SpryValidationTextArea.css dans le dossier SpryAssets de votre site dès que vous créez un widget Zone de texte de validation. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Zone de texte de validation dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Définition du style du texte de message d'erreur d'un widget Zone de texte de validation

Par défaut, les messages d'erreur du widget Zone de texte de validation s'affichent en rouge, entourés d'un bord épais de 1 pixel.

 Pour modifier le style des messages d'erreur d'un widget Zone de texte de validation, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

Texte à modifier

Règle CSS pertinente

Propriétés à modifier

Texte de message d'erreur

.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

color: #CC3333; border: 1px solid #CC3333;

Modification des couleurs d'arrière-plan du widget Zone de texte de validation

 Pour modifier les couleurs d'arrière-plan du widget Zone de texte de validation dans différents états, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :

Couleur d'arrière-plan à modifier

Règle CSS pertinente

Propriété à modifier

Couleur d'arrière-plan du widget dans un état valide

.textareaValidState textarea, textarea.textareaValidState

background-color: #B8F5B1;

Couleur d'arrière-plan du widget dans un état non valide

textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

background-color: #FF9F9F;

Couleur d'arrière-plan du widget actif

.textareaFocusState textarea, textarea.textareaFocusState

background-color: #FFFFCC;