So legen Sie ein Dropdown-Feld in CSS fest

CSS ist eine Programmiersprache für Stil und Layout, die häufig beim Design und der Entwicklung von Websites und Anwendungen verwendet wird. Unter diesen ist das Dropdown-Feld ein häufiges UI-Element, das normalerweise zum Auswählen von Optionen in einer Liste verwendet wird. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS ein Dropdown-Feld einrichten.

HTMLBasics

Bevor wir die CSS-Einstellung des Dropdown-Felds einführen, müssen wir zunächst das Dropdown-Feld-Tag in HTML verstehen. HTML stellt ein Select-Tag und mehrere Options-Tags für das Dropdown-Feld bereit, um jede Option im Dropdown-Feld anzugeben. Hier ist ein einfaches Beispiel für ein Dropdown-Feld:

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

Mit dem obigen Code können wir ein Dropdown-Feld mit drei Optionen erstellen. Als Nächstes verschönern und passen wir es mithilfe von CSS an.

Legen Sie den Stil des Dropdown-Felds fest.

Es ist sehr einfach, den Stil des Dropdown-Felds mithilfe von CSS festzulegen. Sie müssen zum Auswählen nur den Auswahl-Selektor verwenden Klicken Sie auf das Dropdown-Feld und legen Sie dessen Eigenschaften fest. Im Folgenden sind einige häufig verwendete Einstellungen für den Dropdown-Box-Stil aufgeführt:

Dropdown-Box-Breite und -Höhe festlegen

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

Dropdown-Box-Rand und Hintergrundfarbe festlegen #🎜🎜 #

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

.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%);
}

Nach dem Login kopieren

<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>

Nach dem Login kopieren

.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;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo legen Sie ein Dropdown-Feld in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!