Vous pouvez définir l’aspect général et le style du formulaire adaptatif en spécifiant un fichier CSS ou une bibliothèque client. En outre, vous pouvez appliquer des styles CSS intégrés à différents composants de formulaire adaptatif et prévisualiser les modifications apportées à la volée.

A l’aide de l’image suivante d’un composant de texte, voyons d’abord les différentes parties d’un composant de formulaire adaptatif sur lesquelles vous pouvez appliquer des styles.

Parties d’un composant de formulaire adaptatif

Les différentes parties d’un composant de formulaire adaptatif mentionnées dans l’image ci-dessus sont les suivantes :

A.La légende : légende du composant

B.Le champ : zone qui englobe toutes les parties du composant

C. Le widget : zone dans laquelle l’utilisateur spécifie ou sélectionne une valeur pour le champ

D. L’aide : brève description, description longue et indicateur d’aide du composant

Application des propriétés de style CSS intégré

Pour ajouter des styles intégrés à un composant :

  1. Cliquez avec le bouton droit de la souris sur un composant de formulaire adaptatif puis sur Modifier. La boîte de dialogue Modifier le composant s’ouvre.

  2. Cliquez pour ouvrir l’onglet Style.

    Onglet Style dans la boîte de dialogue Modifier le composant
  3. Cliquez sur un onglet dans la section Propriétés CSS intégrées pour spécifier les propriétés CSS. Par exemple :

    1. Dans l’onglet Champ, cliquez sur Ajouter un élément. Une ligne avec deux champs est ajoutée.
    2. Dans le premier champ de gauche, spécifiez une propriété CSS3 à appliquer. Par exemple, la bordure. Vous pouvez également sélectionner une propriété en cliquant sur le bouton de flèche vers le bas. Notez que la liste déroulante n’est pas exhaustive et que vous pouvez spécifier n’importe quel nom de propriété CSS3 prise en charge dans ce champ.
    3. Dans le champ adjacent, spécifiez une valeur valide pour la propriété CSS3 spécifiée. Par exemple, noir 3px.
    4. Cliquez sur Ajouter un élément pour définir une autre propriété et sa valeur.
  4. De même, vous pouvez accéder à d’autres onglets et appliquer des styles pour le widget, la légende et l’aide.

  5. Cliquez sur OK pour confirmer les modifications ou sur Annuler

    pour quitter la boîte de dialogue sans modification.

Exemple : styles intégrés

Les images suivantes illustrent une zone de texte avant et après l’application des styles intégrés.

Composant de zone de texte avant l’application des propriétés de style intégré

Notez la modification du style de la zone de texte comme illustré ci-dessous après l’application des propriétés CSS suivantes.

Onglet

Propriété CSS

Valeur

Effet

Champ

bordure

noir 2px

Crée une bordure large noire 2px autour du champ

Widget

couleur d’arrière-plan

#6495ED

Modifie la couleur d’arrière-plan en CornflowerBlue (#6495ED)

Remarque : Vous pouvez spécifier un nom de couleur ou son code hexadécimal dans le champ Valeur.

Légende

largeur

100px

Définit la largeur sur 100 px pour la légende

Aide - Point d’interrogation

couleur

vert

Modifie la couleur pour l’indicateur d’aide en vert

Aide - Point d’interrogation

contenu

"\e086"

Modifie l’indicateur d’aide d’un point d’interrogation en glyphicon de bootsrap avec la règle CSS spécifiée.
Remarque : Vous devez joindre une règle CSS entre guillemets. Pour obtenir la liste des glyphicons de Bootstrap et de règles CSS correspondantes, consultez L’aide mémoire Bootstrap 3 Glyphicons cheatsheet

Aide - Description longue

alignement de texte

centre

Aligne la description longue pour faciliter le centrage

Composant de zone de texte après l’application des propriétés de style intégré

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne