自定义下拉列表

效果

html

<div class="spinner_btn">
	<span class="default_txt">请选择</span>
	<i class="arrow-down "></i>
	<div class="box-prompt up notShow" >         
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>       
		<i class="tri"></i>
	</div>
</div>
        

CSS

 .spinner_btn {
            font-size: 16px;
            user-select: none;
            color: #606266;
            line-height: 35px;
            width: 200px;
            height: 35px;
            border: 1px solid rgb(224, 222, 222);
            position: relative;
        }
        .spinner_btn>.default_txt {
            float: left;
            padding-left: 5px;

        }
        .spinner_btn>.arrow-down {
            position: absolute;
            right: 10px;
            top: 10px;
            padding: 5px;
            border: 1px solid;
            display: block;
            border-top: 0;
            border-right: 0;
            transform: rotate(-45deg);
        }

        .spinner_btn>.arrow-up {
            position: absolute;
            right: 10px;
            top: 14px;
            padding: 5px;
            border: 1px solid;
            display: block;
            border-top: 0;
            border-right: 0;
            transform: rotate(135deg);
        }


        .box-prompt {
            position: absolute;
            z-index: 1;
            left: -2px;
            padding: 0 2px;
            top: 25px;
            width: 100%;
            border: 1px solid rgb(224, 222, 222);
            background: #fff;
            margin-top: 20px;
        }

        .notShow {
            display: none;
        }

        .box-prompt>i {
            content: "";
            position: absolute;
            background: inherit;
            border: inherit;
            top: -5px;
            left: 25px;
            padding: 4px;
            border-right: 0;
            border-bottom: 0;
            transform: rotate(45deg);
        }

        .box-prompt>li:first-child {
            margin-top: 5px;
        }

        .box-prompt>li {
            height: 40px;
            padding-left: 10px;
            line-height: 40px;
            color: #606266;
            font-size: 16px;
            user-select: none;
            list-style: none;
            background-color: #fff;
        }

        .box-prompt>li:hover {
            background-color: rgb(206, 245, 228);


        }

js

<script src="./js/jquery-3.4.1.min.js"></script>
<script>

    $(".spinner_btn").click(function () {
        $(this).children(".box-prompt").toggleClass("notShow");
        $(".spinner_btn>i").toggleClass("arrow-up");
    })

    $(".box-prompt>li").click(function () {
        var value = $(this).text();
        $(this).parent().siblings(".default_txt").text($(this).text());

    })
</script>

至于后台提交，也很简单，我们只需要额外增加一个表单元素inut,当li标签选中时，就把该li标签的值赋给inut的value,那么后台就可以通过其name属性拿到选中的值了。