Question

我在Firefox中可视化我的选择框时遇到了问题。

在我的网站上，我有三个选择框。在chrome和IE中，它们可视化，但在Firefox中，最后一个选择框箭头在某种程度上始终显示为默认值。

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

HTML code：

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

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

希望你们能帮忙！

Answer 1

只需将<label></label>放在第三个</label>

之后

例如，

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

多数民众赞成。

选择框的自定义CSS

1 个答案: