CSS中如何制作下拉列表，可以通过使用和标签来实现。以下是一个使用CSS实现下拉列表的示例:<style> /* 下拉列表的样式 */ .select-box { posi
CSS中如何制作下拉列表，可以通过使用
<style>
/* 下拉列表的样式 */
.select-box {
position: relative;
display: inline-block;
margin: 10px;
}
.select-box select {
display: block;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 16px;
font-weight: bold;
color: #333;
line-height: 40px;
border: 1px solid #ccc;
background: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* 下拉箭头的样式 */
.select-box:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
font-size: 16px;
font-weight: bold;
color: #333;
line-height: 40px;
text-align: center;
pointer-events: none;
background: #ccc;
}
/* 下拉箭头的图形 */
.select-box:before {
content: "";
position: absolute;
top: 17.5px;
right: 15px;
width: 0;
height: 0;
border: 7.5px solid transparent;
border-top-color: #333;
pointer-events: none;
}
/* 下拉列表选项的样式 */
.select-box select option {
font-size: 16px;
color: #333;
background: #fff;
}
</style>
<div class="select-box">
<select>
<option value="" selected disabled>请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
</div> 以上代码实现了一个简单的下拉列表，通过样式中的伪类:before和:after实现了下拉箭头的图形。需要注意的是，为了在不同浏览器上显示一致，需要使用-webkit-appearance和-moz-appearance属性并设置为none。
粉丝
0
关注
0
收藏
0
