CSS 解决方案
如果我们不需要默认箭头图标，我们可以使用 CSS 外观属性并指定宽度将其从下拉列表中删除。
从下拉列表中删除默认箭头图标的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
select {
-webkit-appearance: none;
width: 50px;
}
</style>
</head>
<body>
<select>
<option>HTML</option>
<option>CSS</option>
</select>
</body>
</html>
使用 !important 规则从下拉列表中删除默认箭头图标的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.dropdown {
width: 100%
}
select {
-webkit-appearance: none;
appearance: none;
}
@-moz-document url-prefix() {
.dropdown {
border: 1px solid #000;
border-radius: 4px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.dropdown select {
width: 110%;
background-position: right 30px center !important;
border: none !important;
}
}
</style>
</head>
<body>
<div class="dropdown">
<select>
<option>HTML</option>
<option>CSS</option>
<option>Git</option>
<option>JavaScript</option>
<option>PHP</option>
</select>
</div>
</body>
</html>
日期：2020-06-02 22:15:11 来源：oir作者：oir