js 原生写下拉框样式

遇到一个问题，发现了一个很有用的却藏得很深的css属性：pointer-events

遇到的问题：我希望让一个div浮在上面，但是鼠标事件作用于被覆盖的图层。

解决方案：设置上面的div的css属性pointer-events为none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .selectBox {
    display: inline-block;
    position: relative;
    }
    .selectTips {
        /* position: absolute;
        height: 100%;
        width: 85%;
        left: 1px;
        top: 0;
        text-align: left;
        line-height: 37px;
        background: white;
        border-bottom: 1px solid #e5e6e7;
        border-top: 1px solid #e5e6e7;
        pointer-events: none;
        padding-left: 15px; */


        font-size: 14px;
        border-top: 1px solid rgb(229, 230, 231);
        border-left: 1px solid rgb(229, 230, 231);
        border-bottom: 1px solid rgb(229, 230, 231);
        width: 90%;
        height: 75%;
        margin-top: 3px;
        border-right-color: rgb(229, 230, 231);
        position: absolute;
        top: 0;
        background: white;
        pointer-events: none;
    }
</style>
<body>
    <div class="selectBox">
        <select name="BillState" id="BillState" class="search form-control">
            <option value="" selected disabled>请选择单据状态2</option>
            <option value="">所有单据</option>
            <option value="@((int)SaleOrderState.Invalid)" item-key="Invalid">草稿</option>
            <option value="@((int)SaleOrderState.ToDelive)" item-key="ToDelive">待出库</option>
            <option value="@((int)SaleOrderState.Deliving)" item-key="Deliving">部分出库</option>
            <option value="@((int)SaleOrderState.Delived)" item-key="Delived">已出库</option>
            <option value="@((int)SaleOrderState.ToSend)" item-key="ToSend">待发货</option>
            <option value="@((int)SaleOrderState.Send)" item-key="Send">已发货</option>
            <option value="@((int)SaleOrderState.ToRefund)" item-key="ToRefund">待退货</option>
            <option value="@((int)SaleOrderState.Refunding)" item-key="Refunding">@(BM.Util.EnumHelper.GetDescription(SaleOrderState.Refunding))</option>
            <option value="@((int)SaleOrderState.Refunded)" item-key="Refunded">已退货</option>
            <option value="@((int)SaleOrderState.Cancel)" item-key="Cancel">已取消</option>
            <option value="@((int)SaleOrderState.ToPay)" item-key="ToPay">待收款</option>
        </select>
        <div class="selectTips" id="BillStateText">
            请选择单据状态1
        </div>
    </div>
    
</body>
</html>
<script src="./jquery-2.0.3.min.js"></script>
<script>
    $(document).ready(function(){
        //选择事件
        $("#BillState").on("change", function () {
            var option_name = $(this).find("option:selected").text(),
                item_name = option_name.replace(/\(\d+\)\s/, "");
            $("#BillStateText").text(item_name);
            $(this).blur();
        });
        //状态事件
        $("#BillState").on({
            focus: function() {
                $("#BillStateText").css("border-color", "#1ab394");
            },
            blur: function () {
                $("#BillStateText").css("border-color", "#e5e6e7");
            }
        });

    });

</script>

posted @ 2021-02-19 16:34 PHP小媛阅读(434) 评论(0) 编辑收藏举报

立里青争

js 原生写下拉框样式

公告