CSSでドロップダウンボックスを設定する方法

CSS はスタイルとレイアウトのためのプログラミング言語であり、Web サイトとアプリケーションの設計と開発で一般的に使用されます。その中で、ドロップダウン ボックスは一般的な UI 要素であり、通常はリスト内のオプションを選択するために使用されます。この記事ではCSSを使ってドロップダウンボックスを設定する方法を紹介します。

HTML の基本

ドロップダウン ボックスの CSS 設定を紹介する前に、まず HTML のドロップダウン ボックス マークを理解する必要があります。 HTML では、ドロップダウン ボックスのオプションを指定するために、ドロップダウン ボックスに選択タグと複数のオプション タグが提供されます。基本的なドロップダウン ボックスの例を次に示します。

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

上記のコードを使用すると、3 つのオプションを含むドロップダウン ボックスを作成できます。次にCSSを使って美化・カスタマイズしていきます。

ドロップダウン ボックスのスタイルを設定する

CSS を使用してドロップダウン ボックスのスタイルを設定するのは非常に簡単です。選択セレクターを使用してドロップを選択するだけです。 -down ボックスを開き、そのプロパティを設定します。一般的に使用されるドロップダウン ボックスのスタイル設定の一部を次に示します。

ドロップダウン ボックスの幅と高さを設定します

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

ドロップダウン ボックスの境界線と背景色を設定します

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

ドロップダウン ボックスのフォントと色を設定します

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

ドロップダウン ボックスの矢印スタイルを設定します

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

上記のコードを通じて、デフォルト スタイルのドロップダウン ボックスをより美しくすることができますパーソナライズされているため、デザインのニーズにさらに適応できます。

カスタマイズされたドロップダウン ボックス スタイル

CSS を使用してドロップダウン ボックスの基本スタイルを設定することに加えて、カスタム スタイルと HTML を使用して特定のドロップダウン ボックス効果を作成することもできます。コード。例をいくつか示します。

カスタム ドロップダウン ボックスは選択ボックスをシミュレートします

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

上記のコードを使用すると、選択ボックスに似たドロップダウン ボックスを作成して、より適切に機能させることができます。他のフォーム要素と一致させます。

カスタム ドロップダウン ボックスはスクロール バーをシミュレートします

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

上記のコードを使用すると、スクロール バーに似たドロップダウン ボックスを作成できるため、長いスクロール バーに適切に適応できます。オプションのリスト。

概要

この記事では、CSS を使用してドロップダウン ボックスの基本スタイルとカスタム スタイルを設定する方法を紹介します。これらのテクノロジーを通じて、さまざまなデザイン ニーズを満たすさまざまなスタイルのドロップダウン ボックスを作成できます。 CSS を使用してドロップダウン ボックスのスタイルを設定する場合、ページの安定性とユーザー エクスペリエンスを確保するために、互換性やパフォーマンスなどの問題に注意を払う必要があります。

以上がCSSでドロップダウンボックスを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。