CSSでドロップダウンボックスを設定する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-24 15:23:59

オリジナル

5631 人が閲覧しました

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 サイトの他の関連記事を参照してください。