css自定义select右侧下拉箭头(不使用图片)

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {

            /* styling */
            background-color: white;
            border: thin solid blue;
            border-radius: 4px;
            display: inline-block;
            font: inherit;
            line-height: 1.5em;
            padding: 0.5em 3.5em 0.5em 1em;

            /* reset */

            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
        }


        /* arrows */

        select.classic {
            background-image: linear-gradient(45deg, transparent 50%, blue 50%),
            linear-gradient(135deg, blue 50%, transparent 50%),
            linear-gradient(to right, skyblue, skyblue);
            background-position: calc(100% - 20px) calc(1em + 2px),
            calc(100% - 15px) calc(1em + 2px),
            100% 0;
            background-size: 5px 5px,
            5px 5px,
            2.5em 2.5em;
            background-repeat: no-repeat;
        }

        select.classic:focus {
            background-image: linear-gradient(45deg, white 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, white 50%),
            linear-gradient(to right, gray, gray);
            background-position: calc(100% - 15px) 1em,
            calc(100% - 20px) 1em,
            100% 0;
            background-size: 5px 5px,
            5px 5px,
            2.5em 2.5em;
            background-repeat: no-repeat;
            border-color: grey;
            outline: 0;
        }


        select.round {
            background-image: linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%),
            radial-gradient(#ddd 70%, transparent 72%);
            background-position: calc(100% - 20px) calc(1em + 2px),
            calc(100% - 15px) calc(1em + 2px),
            calc(100% - .5em) .5em;
            background-size: 5px 5px,
            5px 5px,
            1.5em 1.5em;
            background-repeat: no-repeat;
        }

        select.round:focus {
            background-image: linear-gradient(45deg, white 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, white 50%),
            radial-gradient(gray 70%, transparent 72%);
            background-position: calc(100% - 15px) 1em,
            calc(100% - 20px) 1em,
            calc(100% - .5em) .5em;
            background-size: 5px 5px,
            5px 5px,
            1.5em 1.5em;
            background-repeat: no-repeat;
            border-color: green;
            outline: 0;
        }


        select.minimal {
            background-image: linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%),
            linear-gradient(to right, #ccc, #ccc);
            background-position: calc(100% - 20px) calc(1em + 2px),
            calc(100% - 15px) calc(1em + 2px),
            calc(100% - 2.5em) 0.5em;
            background-size: 5px 5px,
            5px 5px,
            1px 1.5em;
            background-repeat: no-repeat;
        }

        select.minimal:focus {
            background-image: linear-gradient(45deg, green 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, green 50%),
            linear-gradient(to right, #ccc, #ccc);
            background-position: calc(100% - 15px) 1em,
            calc(100% - 20px) 1em,
            calc(100% - 2.5em) 0.5em;
            background-size: 5px 5px,
            5px 5px,
            1px 1.5em;
            background-repeat: no-repeat;
            border-color: green;
            outline: 0;
        }


        select:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 #000;
        }

        body {
            background-color: rgb(0, 159, 214);
            font: bold 1em/100% "Helvetica Neue", Arial, sans-serif;
            padding: 2em 0;
            text-align: center;
        }

        h1 {
            color: white;
            line-height: 120%;
            margin: 0 auto 2rem auto;
            max-width: 30rem;
        }
    </style>
</head>
<body>

<h1>SELECT 使用 CSS 来设置箭头。</h1>

<select class="classic">
    <option>CSS SELECT 箭头</option>
    <option>不使用图片</option>
    <option>选项</option>
</select>
<br><br>
<select class="round">
    <option>CSS SELECT 箭头</option>
    <option>不使用图片</option>
    <option>选项</option>
</select>
<br><br>
<select class="minimal">
    <option>CSS SELECT 箭头</option>
    <option>不使用图片</option>
    <option>选项</option>
</select>

</body>
</html>
我的啊民
发布了88 篇原创文章 · 获赞 3 · 访问量 4228
私信关注
css自定义select右侧下拉箭头(不使用图片)

猜你喜欢
