码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-04-25 10:16:33      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:firefox   火狐浏览器   nbsp   框架   com   prefix   border   sheet   谷歌   

经常遇到这样的问题,在使用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>

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

标签:firefox   火狐浏览器   nbsp   框架   com   prefix   border   sheet   谷歌   

原文地址:https://www.cnblogs.com/yuner-angel/p/8940035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!