学习在html中使用css去掉select自带的边框和小三角

徊忆羽菲

已于 2022-09-29 17:19:16 修改

阅读量2.5k

点赞数

分类专栏： Html 文章标签：学习 html css

于 2022-09-29 17:18:32 首次发布

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

版权

Html 专栏收录该内容

247 篇文章 7 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>下拉去掉边框和小三角</title>
    <style type="text/css">
        #selected {
            width: 10%;
            height: 100%;
            background-color: #000000;
            color: white;
            /* 去掉三角 */
            appearance: none;
            -moz-appearance: none; /* Firefox */
            -webkit-appearance: none; /* Safari 和 Chrome */
            /* 去掉边框 */
            border: 0;
            display: block;
            position: relative;
        }
    </style>
</head>
<body>
<select id="selected">
    <option>选择查询条件</option>
    <option>奇葩天地网</option>
    <option>www.qipa250.com</option>
</select>
</body>
</html>