select取消自带图标，替换成自己的图标，右箭头和向下箭头切换

作者：Liaodeity - 2021年06月02日

实现一个改写select切换图标效果

实现代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        select{
            -webkit-appearance: none;
            outline: 0;
            background-color: transparent;
            width: 200px;
            font-size: inherit;
            height: 44px;
            line-height: 44px;
            position: relative;
            z-index: 1;
            padding-left: 15px;
        }
        .icon-right{
            background: url(icon-right.png) no-repeat;
            background-position: right;
        }
        .icon-down{
            background: url(icon-down.png) no-repeat;
            background-position: right;
        }
    </style>
</head>
<body>
<select class="icon-right" name="" id="sex">
    <option value="">请选择</option>
    <option value="男">男</option>
    <option value="女">女</option>
</select>
<script src="https://www.unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    $(function () {
        $("#sex").focus(function () {
            $(this).removeClass('icon-right').addClass('icon-down');
        });
        $("#sex").change(function () {
            $("#sex").blur()
        });
        $("#sex").blur(function () {
            $("#sex").removeClass('icon-down').addClass('icon-right');
        })
    })
</script>
</body>
</html>

本文作者： Liaodeity

本文链接： https://www.jianbaizhan.com/article/734

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！