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

最新推荐文章于 2022-12-07 20:12:21 发布

转载最新推荐文章于 2022-12-07 20:12:21 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moumou0213/p/6564031.html

文章标签：

#javascript #ui #ViewUI

本文介绍了一种在使用Bootstrap框架时，针对火狐浏览器select选择框样式进行调整的方法，使其与其他浏览器保持一致的外观。

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

经常遇到这样的问题，在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式，跟谷歌等其他的浏览器样式对比很难看，并且很难调整，但是！

好东西来了，现在能调成跟谷歌一样的样式，只需要设置兼容火狐的样式即可：

　　<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>