Bagaimana untuk menetapkan kotak drop-down dalam css

CSS ialah bahasa pengaturcaraan yang digunakan untuk gaya dan reka letak, biasanya digunakan dalam reka bentuk dan pembangunan tapak web dan aplikasi. Antaranya, kotak lungsur ialah elemen UI biasa, biasanya digunakan untuk memilih pilihan dalam senarai. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menyediakan kotak lungsur.

Asas HTML

Sebelum memperkenalkan CSS untuk menetapkan kotak lungsur, kita perlu terlebih dahulu memahami teg kotak lungsur dalam HTML. HTML menyediakan teg pilih dan teg berbilang pilihan untuk kotak lungsur untuk menentukan setiap pilihan dalam kotak lungsur. Berikut ialah contoh kotak lungsur asas:

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

Dengan kod di atas, kami boleh mencipta kotak lungsur dengan tiga pilihan. Seterusnya, kami akan mencantikkan dan menyesuaikannya menggunakan CSS.

Tetapkan gaya kotak lungsur turun

Sangat mudah untuk menetapkan gaya kotak lungsur menggunakan CSS Anda hanya perlu menggunakan pemilih untuk memilih drop-. bawah kotak dan tetapkan sifatnya. Berikut ialah beberapa tetapan gaya kotak lungsur yang biasa digunakan:

Tetapkan lebar dan tinggi kotak lungsur turun

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

Tetapkan sempadan kotak lungsur dan warna latar belakang

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

Tetapkan kotak lungsur Font dan warna

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

Tetapkan gaya anak panah kotak lungsur

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

Dengan kod di atas, kita boleh membuat kotak lungsur gaya lalai lebih cantik dan diperibadikan, menjadikannya lebih disesuaikan dengan keperluan reka bentuk kami.

Gaya kotak lungsur turun tersuai

Selain menggunakan CSS untuk menetapkan gaya asas kotak lungsur turun, kami juga boleh mencipta kesan kotak lungsur turun tertentu melalui gaya tersuai dan HTML kod. Berikut ialah beberapa contoh:

Kotak lungsur tersuai mensimulasikan kotak pilihan

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

Dengan kod di atas, kami boleh mencipta kotak lungsur yang serupa dengan kotak pilihan , menjadikannya lebih Selaras dengan elemen bentuk lain.

Kotak lungsur turun tersuai menyerupai bar skrol

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

Dengan kod di atas, kami boleh mencipta kotak lungsur yang serupa dengan bar skrol supaya ia boleh menyesuaikan diri dengan lebih baik kepada senarai pilihan yang lebih panjang.

Ringkasan

Artikel ini memperkenalkan cara menggunakan CSS untuk menetapkan gaya asas dan gaya tersuai kotak lungsur. Melalui teknologi ini, kami boleh mencipta kotak lungsur dengan gaya berbeza untuk memenuhi keperluan reka bentuk yang berbeza. Apabila menggunakan CSS untuk menggayakan kotak lungsur, kami perlu memberi perhatian kepada isu seperti keserasian dan prestasi untuk memastikan kestabilan halaman dan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kotak drop-down dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!