修改select下拉小三角样式为图片

徊忆羽菲

已于 2022-09-29 18:18:53 修改

阅读量622

点赞数

分类专栏： Html 文章标签：前端 javascript html

于 2022-09-29 18:18:35 首次发布

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/127111804

版权

Html 专栏收录该内容

241 篇文章 6 订阅

订阅专栏

下拉小三角

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>下拉小三角</title>
    <style type="text/css">
        #qipa_select {
            display: flex;
            display: -webkit-flex;
            120px;
            font-size: 24px;
            padding: 0 5px;
            margin: 20px auto;
            outline: none;
            border: 1px solid #00DD00;
            appearance: none;
            /* 兼容Chrome */
            -webkit-appearance: none;
            background: url(./img/xiala.png) no-repeat right center;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            color: #FF5511;
            width: 556px;
            height: 100px;
        }
    </style>
</head>
<body>

    <select name="" id="qipa_select">
        <option value="奇葩天地网">奇葩天地网</option>
        <option value="qipa250">www.qipa250.com</option>
    </select>
</body>
</html>