Css 引导选择在firefox和chrome中呈现方式不同

引导选择在firefox和chrome中呈现方式不同：

火狐：

铬

两个浏览器如何以相同的方式呈现？最好是这样

我的问题与这个问题不同 :

---

因为问题不是宽度或高度，问题是选择字段中的三角形（在右侧），呈现此三角形的方式与浏览器呈现此三角形的方式完全不同，下面问题的答案不适用于这种情况。

它们不会以相同的方式呈现。每个浏览器看起来都不一样，浏览器就是wordst

我今天只是在做这个！您可以有一个背景div，其中包括边框和右侧上下颠倒三角形的背景图像。然后在第一个选择的div上方有一个跨度（在您的示例中为“1”）。然后将“选择”菜单放在具有绝对定位和零不透明度的div/span顶部。这会使“选择”菜单的浏览器默认设置完全不显示

显示24
显示24
显示48
秀96
查看所有

如果对某人有用，解决我问题的代码是：

    select.custom {
                        background-image: url("https://lh3.googleusercontent.com/-UO0rQxRXKW0/VzN-mqXyiUI/AAAAAAAAPgM/XQibxHl_LcI57GDUV49IUQUYf6_OUvkngCCo/s166/Untitled-1.gif");
                        -moz-appearance: none;
                        padding-right: 25px;
                        background-repeat: no-repeat;
                        background-position: right center;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                    }
<select class="form-control custom">
  <option>1</option>
  <option>2</option>  
</select>

select.custom{
背景图像：url（“https://lh3.googleusercontent.com/-UO0rQxRXKW0/VzN-mqXyiUI/AAAAAAAAPgM/XQibxHl_LcI57GDUV49IUQUYf6_OUvkngCCo/s166/Untitled-1.gif");
-moz外观：无；
右边填充：25px；
背景重复：无重复；
背景位置：右中；
-webkit外观：无；
-moz外观：无；
外观：无；
}
1.
2.

---

我根据上面W答案中传递的示例/链接编写了此代码，链接为：

可能重复感谢，在您传递的链接中我解决了我的问题，我对链接的示例代码做了一些小更改，现在工作正常。

    select.custom {
                        background-image: url("https://lh3.googleusercontent.com/-UO0rQxRXKW0/VzN-mqXyiUI/AAAAAAAAPgM/XQibxHl_LcI57GDUV49IUQUYf6_OUvkngCCo/s166/Untitled-1.gif");
                        -moz-appearance: none;
                        padding-right: 25px;
                        background-repeat: no-repeat;
                        background-position: right center;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                    }
<select class="form-control custom">
  <option>1</option>
  <option>2</option>  
</select>