How to set drop-down box in css

CSS is a programming language for style and layout, commonly used in the design and development of Web sites and applications. Among them, the drop-down box is a common UI element, usually used to select options in a list. This article will introduce how to use CSS to set up a drop-down box.

HTML Basics

Before introducing the CSS setting of the drop-down box, we need to first understand the drop-down box mark in HTML. HTML provides a select tag and multiple option tags for the drop-down box to specify the options in the drop-down box. Here is a basic drop-down box example:

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

With the above code, we can create a drop-down box containing three options. Next, we'll beautify and customize it using CSS.

Set the style of the drop-down box

It is very simple to set the style of the drop-down box using CSS. You only need to use the select selector to select the drop-down box and set its properties. The following are some commonly used drop-down box style settings:

Set the drop-down box width and height

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

Set the drop-down box border and background color

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

Set the drop-down box font and color

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

Set the drop-down box arrow style

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

Through the above code, we can make the default style drop-down box more beautiful and personalized, so that it can better adapt to our design needs.

Customized drop-down box style

In addition to using CSS to set the basic style of the drop-down box, we can also create specific drop-down box effects through custom styles and HTML code. Here are some examples:

Custom drop-down box simulates a select box

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

With the above code, we can create a drop-down box similar to a select box, making it work better with other forms elements to match.

Custom drop-down box simulates scroll bar

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

With the above code, we can create a drop-down box that is similar to a scroll bar so that it can better adapt to a long list of options.

Summary

This article introduces how to use CSS to set the basic style and custom style of the drop-down box. Through these technologies, we can create different styles of drop-down boxes to meet different design needs. When using CSS to style drop-down boxes, we need to pay attention to issues such as compatibility and performance to ensure page stability and user experience.

The above is the detailed content of How to set drop-down box in css. For more information, please follow other related articles on the PHP Chinese website!