取消 select 下拉框默认样式

最新推荐文章于 2025-07-10 16:41:26 发布

置顶枫丿慕

最新推荐文章于 2025-07-10 16:41:26 发布

阅读量1.1w

点赞数 5

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/abcde158308/article/details/53992495

前端同时被 3 个专栏收录

82 篇文章

订阅专栏

兼容

5 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了一种方法来统一不同设备上HTML Select元素的显示样式，特别是针对安卓和iOS平台下拉箭头样式的差异进行了调整。通过CSS代码实现了跨平台一致性的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>