css自定义下拉框样式

最新推荐文章于 2023-02-24 09:53:09 发布

江湖行骗老中医

最新推荐文章于 2023-02-24 09:53:09 发布

阅读量1.3k

点赞数 1

分类专栏： # css

本文链接：https://blog.csdn.net/liming1016/article/details/104241336

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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>

江湖行骗老中医

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
css自定义下拉框样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css自定义下拉框样式</title> <style> body { background:#fff; ...
复制链接

扫一扫