css自定义下拉框样式

我会带着你远行 2021-07-26 12:06 886阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css自定义下拉框样式</title>
        <style>
            body {
                background:#fff;
                display:flex;
                justify-content: center;
                align-items:center;
                flex-wrap:wrap;
                padding:0;
                margin:0;
                height:100vh;
                width:100vw;
                font-family: sans-serif;
                color:#FFF;
            }
    
            .select {
                display:flex;
                flex-direction: column;
                position:relative;
                width:250px;
                height:40px;
            }
    
            .option {
                padding:0 30px 0 10px;
                min-height:40px;
                display:flex;
                align-items:center;
                background:#333;
                border-top:#222 solid 1px;
                position:absolute;
                top:0;
                width: 100%;
                pointer-events:none;
                order:2;
                z-index:1;
                transition:background .4s ease-in-out;
                box-sizing:border-box;
                overflow:hidden;
                white-space:nowrap;
    
            }
    
            .option:hover {
                background:#666;
            }
    
            .select:focus .option {
                position:relative;
                pointer-events:all;
            }
    
            input {
                opacity:0;
                position:absolute;
                left:-99999px;
            }
    
            input:checked + label {
                order: 1;
                z-index:2;
                background:#666;
                border-top:none;
                position:relative;
            }
    
            input:checked + label:after {
                content:'';
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 5px solid white;
                position:absolute;
                right:10px;
                top:calc(50% - 2.5px);
                pointer-events:none;
                z-index:3;
            }
    
            input:checked + label:before {
                position:absolute;
                right:0;
                height: 40px;
                width: 40px;
                content: '';
                background:#666;
            }
        </style>
    </head>
    <body>
    <div class="select" tabindex="1">
        <input class="selectopt" name="test" type="radio" id="opt1" checked>
        <label for="opt1" class="option">Oranges</label>
        <input class="selectopt" name="test" type="radio" id="opt2">
        <label for="opt2" class="option">Apples</label>
        <input class="selectopt" name="test" type="radio" id="opt3">
        <label for="opt3" class="option">Grapefruit</label>
        <input class="selectopt" name="test" type="radio" id="opt4">
        <label for="opt4" class="option">Bananas</label>
        <input class="selectopt" name="test" type="radio" id="opt5">
        <label for="opt5" class="option">Watermelon</label>
    </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70]: /images/20210726/6b93ee95516e4e4083bff9e054f6b083.png