Home > Article > Web Front-end > 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.
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.
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:
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; /* 设置右内边距 */ }
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.
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:
<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.
<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.
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!