select标签如何让原生小三角去掉并用图标代替
时间: 2023-07-26 19:17:50 浏览: 46
可以通过CSS来让原生的select标签去掉小三角,并用图标来代替。
首先,可以通过CSS中的appearance属性来去掉原生的select标签的小三角。再通过background-image属性来设置自定义图标。
以下是一个简单的示例:
HTML代码:
```
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
```
CSS代码:
```
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('path/to/icon.png');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
```
其中,path/to/icon.png是自定义图标的路径,-webkit-appearance、-moz-appearance和appearance属性用于去掉原生的小三角,background-image属性用于设置自定义图标,background-repeat属性设置不重复,background-position属性用于调整图标的位置,padding-right属性用于给select标签右侧留出图标的空间。
需要注意的是,这种方法只适用于支持CSS appearance属性的浏览器。如果浏览器不支持此属性,那么自定义图标可能会被忽略,同时原生的小三角也可能不会被去掉。