取消 select 下拉框默认样式

最新推荐文章于 2022-05-07 16:02:35 发布

置顶枫丿慕

最新推荐文章于 2022-05-07 16:02:35 发布

阅读量1.1w

点赞数 5

分类专栏：前端兼容 css 文章标签： select 下拉框兼容问题

本文链接：https://blog.csdn.net/abcde158308/article/details/53992495

版权

前端同时被 3 个专栏收录

82 篇文章 1 订阅

订阅专栏

兼容

5 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

select 下拉框安卓和ios 的默认样式不同，乐视手机下拉框会自带下拉箭头，这里所以要取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
    <style type="text/css">
        select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: solid 1px #000;
            /*很关键：将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            /*将背景改为绿色*/
            background:green;
            /*留出一点位置，避免被文字覆盖*/
            padding-right: 14px;
        }
        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand { display: none; }
    </style>
</head>
<body>
    <select>
        <option>2342</option>
        <option>fsdfsdfd</option>
        <option>8430892304iokflsd</option>
    </select>
</body>
</html>

www.186886.top liulei.186886.top

枫丿慕

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
取消 select 下拉框默认样式

select 下拉框安卓和ios 的默认样式不同，乐视手机下拉框会自带下拉箭头，这里所以要取消&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉框&lt;/title&gt; &l
复制链接

扫一扫