选择框的自定义CSS

在Firefox中可视化我的选择框时出现问题

在我的网站上，我有三个选择框。在chrome和IE中，它们应该是可视化的，但在Firefox中，最后一个选择框箭头总是以某种方式显示为默认值

如果我添加一个新的或删除一个选择框，结果是相同的

这是有问题的网站：

HTML代码：

<label>
    <select>
        <option selected> AARHUS </option>
        <option>ODENSE</option>
        <option>KØBENHAVN</option>
    </select>
</label>​

<label>
    <select>
        <option selected> KØBENHAVN </option>
        <option>ODENSE</option>
        <option>AARHUS</option>
    </select>
</label>​

<label>
    <select>
        <option selected> 31. MAJ 2013 </option>
        <option>2. JUNI 2013</option>
        <option>3. JUNI 2013</option>
    </select>
</label>​

奥胡斯
欧登塞
KØBENHAVN
​
KØBENHAVN
欧登塞
奥胡斯
​
312013年6月
2.2013年6月
3.2013年6月
​

CSS代码：

/* The CSS */
select {
    padding:2px;
    padding-left: 60px;
    margin-top: 10px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background: #260B01;
    color:#FFFFFF;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    width: 300px;
    height: 29px;
    font-family: Dosis;
    font-size: 18px;
    font-weight: 400;

}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:18px "Doris", monospace;
    color:#FFFFFF;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:-4px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
    opacity: 0.8;
}
label:before {
    content:'';
    right:4px; top:-7px;
    width:27px; height:28px;
        -webkit-border-radius:4px;
    -moz-border-radius:4px;
    background:#A6977C;
    position:absolute;
    pointer-events:none;
    display:block;
}

/*CSS*/
挑选{
填充：2px；
左侧填充：60px；
边缘顶部：10px；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
背景#260B01；
颜色：#FFFFFF；
边界：无；
大纲：无；
显示：内联块；
-webkit外观：无；
-moz外观：无；
外观：无；
光标：指针；
宽度：300px；
高度：29px；
字体系列：Dosis；
字号：18px；
字体大小：400；
}
/*仅针对Webkit浏览器。FF将显示带有如此多填充的下拉箭头*/
@媒体屏幕和（-webkit最小设备像素比：0）{
选择{padding right:18px}
}
标签{位置：相对}
标签：后{
内容：''；
字体：18px“Doris”，单空格；
颜色：#FFFFFF；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
右：8px；顶部：-4px；
填充：0 0 2px；
边框底部：1px实心#ddd；
位置：绝对位置；
指针事件：无；
不透明度：0.8；
}
标签：之前{
内容：''；
右：4px；顶部：-7px；
宽度：27px；高度：28px；
-webkit边界半径：4px；
-moz边界半径：4px；
背景：#A6977C；
位置：绝对位置；
指针事件：无；
显示：块；
}

希望你们能帮忙

只需将

放在第三个

比如说,

<label>
<select>
  <option selected=""> 31. MAJ 2013 </option>
  <option>2. JUNI 2013</option>
  <option>3. JUNI 2013</option>
</select>
</label>
&#8203;
<label></label>

312013年6月
2.2013年6月
3.2013年6月
​

---

就是这样。

但是在IE和chromeI中产生了问题，在第三个选择框之后已经实现了。您可以在网站上看到结果。将此样式添加到此标签<代码>位置：绝对；右：46px；顶部：172px。例如

。希望这有帮助@约托瑟汗完美无瑕。成功了！我用的是top:174px，但它有效。非常感谢。不客气-@Jotothehan