select下拉框箭头样式修改

最新推荐文章于 2025-04-12 10:52:15 发布

weixin_45162984

最新推荐文章于 2025-04-12 10:52:15 发布

阅读量1.4w

点赞数 7

分类专栏：前端css 文章标签： select 下拉框 input

本文链接：https://blog.youkuaiyun.com/weixin_45162984/article/details/90731863

版权

前端css 专栏收录该内容

20 篇文章

订阅专栏

select下拉框箭头样式修改

下拉框箭头是不能修改的,但我们可以吧原有的箭头去掉,再用背景写一个箭头

<style>
/*下拉前箭头*/
    select{
        /*取消默认箭头开始*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*取消默认箭头结束*/
        border: none;
        width: 9rem;
        font-size: 1rem;
        color: #666;
        text-align-last: center; /* 文本居中*/
        background: url(style/jiantou.png) no-repeat right 0.5rem center;
        background-size: 0.45rem 0.8rem;
    }
/*下拉后箭头*/
    select:focus {
        background: url(style/jiantou_bottom.png) no-repeat right 0.5rem center;
        background-size: 0.8rem 0.45rem;
    }
    /*修改option*/
    option::-ms-expand{ display: none; }
	option{
	    -moz-appearance:none; /* Firefox */
	    -webkit-appearance:none; /* Safari 和 Chrome */
	    appearance:none;
	}
	/* --背景色字体颜色--*/
	option:hover{
	    color:#fff;
	    background-color:#1E90FF;
	}
</style>