兼容火狐浏览器的select下拉框样式

最新推荐文章于 2023-11-10 17:05:53 发布

转载最新推荐文章于 2023-11-10 17:05:53 发布 · 3k 阅读

文章标签：

#火狐兼容 #兼容火狐浏览器的select下拉框样式 #兼容select下拉框样式 #前端兼容select

本文介绍了一种使用CSS自定义Bootstrap中下拉框样式的解决方案。通过调整CSS属性，可以使下拉框更加美观，并与网页整体风格保持一致。

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

解决方法

<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
    <style>
        @-moz-document url-prefix() {
            select.form-control {
                -moz-appearance: none;
                appearance: none;
                background-image: url("http://221.228.109.114:8083/manage/more/firefox_select_icon.png");
                background-repeat: no-repeat;
                background-position: calc(100% - 7px) 50%;
                background-size: 2% auto;
                border-radius:3px;
                padding:0;
            }
        }
    </style>