Compatible with Firefox's select drop-down box style

I often encounter such a problem. When using the bootstrap framework, the style of the select box inherits the style of the browser itself on the Firefox browser. Compared with other browser styles such as Google, it is ugly and difficult to adjust, but !

The good thing is here, now it can be adjusted to the same style as Google, just need to set the style compatible with Firefox:

 

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