Comment définir une liste déroulante en CSS

CSS est un langage de programmation pour le style et la mise en page, couramment utilisé dans la conception et le développement de sites Web et d'applications. Parmi eux, la liste déroulante est un élément courant de l’interface utilisateur, généralement utilisé pour sélectionner des options dans une liste. Cet article explique comment utiliser CSS pour configurer une liste déroulante.

Bases du HTML

Avant d'introduire le paramètre CSS de la zone déroulante, nous devons d'abord comprendre la balise de la zone déroulante en HTML. HTML fournit une balise de sélection et plusieurs balises d'option pour la zone déroulante afin de spécifier les options dans la zone déroulante. Voici un exemple de liste déroulante de base :

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

Avec le code ci-dessus, nous pouvons créer une liste déroulante avec trois options. Ensuite, nous allons l'embellir et le personnaliser à l'aide de CSS.

Définissez le style de la zone déroulante

Il est très simple d'utiliser CSS pour styliser la zone déroulante. Il vous suffit d'utiliser le sélecteur pour sélectionner la zone déroulante et définir ses propriétés. Voici quelques paramètres de style de liste déroulante couramment utilisés :

Définissez la largeur et la hauteur de la liste déroulante

select {
  width: 200px; /* 设置宽度 */
  height: 30px; /* 设置高度 */
}

Définissez la bordure et la couleur d'arrière-plan de la liste déroulante

select {
  border: 1px solid #ccc; /* 设置边框 */
  background-color: #f7f7f7; /* 设置背景色 */
}

Définissez la police et la couleur de la liste déroulante

select {
  font-size: 16px; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
}

Définissez le style de flèche de la liste déroulante

select {
  appearance: none; /* 去掉默认箭头 */
  background-image: url('arrow.svg'); /* 设置自定义箭头 */
  background-position: center right; /* 设置箭头位置 */
  background-repeat: no-repeat; /* 禁止重复 */
  padding-right: 30px; /* 设置右内边距 */
}

Grâce au code ci-dessus, nous pouvons rendre la boîte déroulante de style par défaut plus belle et personnalisée, afin qu'elle puisse mieux s'adapter à nos besoins de conception.

Style de liste déroulante personnalisé

En plus d'utiliser CSS pour définir le style de base de la zone déroulante, nous pouvons également créer des effets de liste déroulante spécifiques via des styles personnalisés et du code HTML. Voici quelques exemples :

La zone déroulante personnalisée simule une zone de sélection

<div class="select-box">
  <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
  <div class="select-arrow"></div>
</div>

.select-box {
  position: relative;
  display: inline-block;
}

select {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.select-arrow {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #666;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Avec le code ci-dessus, nous pouvons créer une zone déroulante similaire à une zone de sélection, afin qu'elle puisse mieux coopérer avec d'autres éléments du formulaire.

La liste déroulante personnalisée simule la barre de défilement

<div class="select-box">
  <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    <option>选项5</option>
    <option>选项6</option>
    <option>选项7</option>
    <option>选项8</option>
    <option>选项9</option>
    <option>选项10</option>
    <option>选项11</option>
    <option>选项12</option>
    <option>选项13</option>
    <option>选项14</option>
    <option>选项15</option>
    <option>选项16</option>
    <option>选项17</option>
    <option>选项18</option>
    <option>选项19</option>
    <option>选项20</option>
  </select>
  <div class="select-scrollbar">
    <div class="select-scrollbar-thumb"></div>
  </div>
</div>

.select-box {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 40px;
}

select {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.select-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background-color: #f7f7f7;
  z-index: 2;
  overflow-y: scroll;
}

.select-scrollbar-thumb {
  position: relative;
  width: 100%;
  height: 50%;
  background-color: #ccc;
  border-radius: 4px;
  z-index: 3;
}

Avec le code ci-dessus, nous pouvons créer une zone déroulante qui ressemble à une barre de défilement, lui permettant de mieux s'adapter à une liste d'options plus longue.

Résumé

Cet article explique comment utiliser CSS pour définir le style de base et le style personnalisé de la liste déroulante. Grâce à ces technologies, nous pouvons créer différents styles de listes déroulantes pour répondre à différents besoins de conception. Lorsque nous utilisons CSS pour styliser les listes déroulantes, nous devons prêter attention à des problèmes tels que la compatibilité et les performances afin de garantir la stabilité de la page et l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!