Html firefox css选项样式不起作用

我正在尝试使用CSS更改我的选项选择框样式

Google Chrome中的一切都很好，但Mozilla Firefox中的样式不起作用

在Mozilla Firefox中使用CSS代码时，我缺少了什么

在这方面有人能帮我吗

.集装箱{ 位置：相对位置； 宽度：100%； 最大宽度：500px； 保证金：0px自动； 边缘顶部：100px； 填充：40px； 背景色：fafa； 边框：1px实心d8dbdf； -webkit盒方向：水平； -webkit盒方向：正常； -webkit柔性方向：行； -ms柔性方向：行； 弯曲方向：行； -webkit框对齐：拉伸； -webkit对齐项目：拉伸； -ms-flex-align：拉伸； 对齐项目：拉伸； 显示：-网络工具包盒； 显示：-webkit flex； 显示：-ms flexbox； 显示器：flex； } .i_bd选择{ 背景色：rgb255，255，255，1！重要； 边界半径：3px； -webkit边界半径：3px； -moz边界半径：3px； 填充：18px； 颜色：333333； 字体大小：13px； 字号：500； 大纲：无； 边框：1px实心RGBA2392391； 宽度：80px； 高度：30px； } .i_bd{ -webkit-box-flex:1； -webkit-flex-grow:1； -ms-flex阳性1例； 柔性生长：1； -webkit弹性收缩：1； -ms-flex阴性：1； 弹性收缩：1； 位置：相对位置； 浮动：左； 右边距：10px； } 1. 2. 3. 4. 根据我的评论：众所周知，元素很难进行风格设计，因为它们会干扰操作系统和特定于供应商的风格。最好的方法是完全重置元素，使用“外观”属性并将其设置为“无”，然后使用背景图像代替下拉箭头

样式的另一个问题是在select元素上声明了18px的填充，但其高度仅为30px。这导致内容实际上没有空间显示，-6px。如果将垂直填充减少到较低的值，则将显示文本。在本例中，我使用了padding:4px18px

在下面的概念验证示例中，我使用了转换为base64代码的。您可以使用将任何SVG轻松转换为base64

.集装箱{ 位置：相对位置； 宽度：100%； 最大宽度：500px； 保证金：0px自动； 边缘顶部：100px； 填充：40px； 背景色：fafa； 边框：1px实心d8dbdf； -webkit盒方向：水平； -webkit盒方向：正常； -webkit柔性方向：行； -ms柔性方向：行； 弯曲方向：行； -webkit框对齐：拉伸； -webkit对齐项目：拉伸； -ms-flex-align：拉伸； 对齐项目：拉伸； 显示：-网络工具包盒； 显示：-webkit flex； 显示：-ms flexbox； 显示器：flex； } .i_bd选择{ 背景色：rgb255、255、255、1！重要； 边界半径：3px； -webkit边界半径：3px； -moz边界半径：3px； /*确保减少顶部/底部填充*/ 填充：4px18px； 颜色：333333； 字体大小：13px； 字号：500； 大纲：无； 边框：1px实心RGBA2392391； 宽度：80px； 高度：30px； /*禁用特定于供应商的外观*/ -webkit外观：无； -moz外观：无； 外观：无； /*使用三角形背景作为箭头*/ 背景图片：urldata:image/svg+xml；base64，phn2zybmawxspsijmdawiibozwlnahq9iji0iib2awv3qm94psiwidagmjqihihdpzhropsiyncigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij4gicagphbgggzd0ittcgmtbssna1dutinxoI48l3n2zz4=； 背景尺寸：24px 24px； 背景重复：无重复； 背景位置：右中； } .i_bd{ -webkit-box-flex:1； -webkit-flex-grow:1； -ms-flex阳性1例； 柔性生长：1； -webkit弹性收缩：1； -ms-flex阴性：1； 弹性收缩：1； 位置：相对位置； 浮动：左； 右边距：10px； } 1. 2. 3. 4.

---

元素通常很难设置样式，因为供应商和操作系统的特定样式已经存在。例如，您可能需要设置外观：无记住还要添加供应商前缀的变体，并将箭头添加为背景图像-webkit外观：无；外观：无；通过添加外部div添加箭头。问题是，当我选择4时，它不显示选择了4。仍然空着selectbox@DevStud这与select元素上的垂直填充有关，如果减少它，文本将出现。请参阅更新的答案。