美文网首页
兼容火狐浏览器的select下拉框样式

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

作者: AKZhang | 来源:发表于2018-06-13 15:40 被阅读0次

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

          本文链接:https://www.haomeiwen.com/subject/mrwjeftx.html