CSS自定义select选择框样式（右侧下拉箭头）

最新推荐文章于 2024-08-01 13:41:00 发布

@xiaomajia

最新推荐文章于 2024-08-01 13:41:00 发布

阅读量2.7w

点赞数 4

文章标签： css自定义select样式

本文链接：https://blog.csdn.net/xiaomajia029/article/details/82908719

版权

如图：自定义select的箭头样式

HTML以及CSS代码如下：

<select class="form_select">
    <option value="0">请选择</option>
    <option value="1">aaaaa</option>
    <option value="2">bbbbb</option>
</select>

.form_select {
    /* 清除默认边框 */
    border: 0;
    /* 清除默认的箭头样式 */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /* 右侧添加小箭头的背景图 */
    background: url('../../img/select_arrow.png') 230px center no-repeat;
    background-size: 12px;
}