Personnalisation du widget Validation de la sélection



Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de la sélection, 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 Validation de la sélection 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_spryselect_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 SpryValidationSelect.css. Dreamweaver enregistre le fichier SpryValidationSelect.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de la sélection. 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 Validation de la sélection 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 Validation de la sélection

Par défaut, les messages d'erreur du widget Validation de la sélection s'affichent en rouge, entourés d'un bord épais de 1 pixel.

 Pour modifier le style des messages d'erreur d'un widget Validation de sélection, 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 à mettre en forme

Règle CSS pertinente

Propriétés à modifier

Texte de message d'erreur

.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg

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

Modification des couleurs d'arrière-plan du widget Validation de la sélection

 Pour modifier les couleurs d'arrière-plan du widget Validation de la sélection 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

.selectValidState select, select.selectValidState

background-color: #B8F5B1;

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

select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select

background-color: #FF9F9F;

Couleur d'arrière-plan du widget actif

.selectFocusState select, select.selectFocusState

background-color: #FFFFCC;