Sommaire

Les objets de sélection

1. Les listes déroulantes

Pour que l’utilisateur sélectionne une valeur unique, vous pouvez utiliser les listes déroulantes avec l’objet select.

Voici le code de cet exemple :

<form...> 
  <div class="row"> 
     <div class="medium-12 columns"> 
        <label>Sélectionnez une destination : 
           <select> 
              <option value="France">France</option> 
              <option value="Italie">Italie</option> 
              <option value="Allemagne">Allemagne</option> 
              <option value="Espagne">Espagne</option> 
           </select> 
        </label> 
     </div> 
  </div> 
</form>

Le fichier de cet exemple à télécharger est Chapitre 05 / 05-forms-c1.html.

Voici son affichage :

images/C05-002.png

Voici le principal sélecteur et ses propriétés CSS utilisées par les listes déroulantes :

select { 
  height: 2.4375rem; 
  padding: 0.5rem; 
  border: 1px solid #cacaca; 
  border-radius: 0; 
  margin: 0 0 1rem; 
  font-size: 1rem;  ...