修改select的右边的小三角，解决浏览器样式不一致问题

最新推荐文章于 2021-10-22 21:05:45 发布

蜗牛撵大象

最新推荐文章于 2021-10-22 21:05:45 发布

阅读量912

点赞数 2

分类专栏：互联网 javascript

互联网同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

修改select的右边的小三角，解决浏览器样式不一致问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: none;
            outline: none;

            /*很关键：将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;

            /*在选择框的最右侧中间显示小箭头图片*/
            background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            padding-right: 18px;
        }


        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand { display: none; }
    </style>
</head>
<body>
<select>
    <option>CH</option>
    <option>EN</option>
</select>
</body>
</html>