0

Firefox で選択ボックスを視覚化する際に問題があります。

私のウェブサイトには、3 つの選択ボックスがあります。chrome と IE では、本来あるべきように視覚化されますが、Firefox では、最後の選択ボックスの矢印が何らかの形で常にデフォルトで表示されます。

新しい選択ボックスを追加または削除しても、結果は同じです。

これは問題のウェブサイトです: http://johanutzon.dk/billet/

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

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

皆さんが助けてくれることを願っています!

4

1 に答える 1

0

<label></label>3番目の後に置くだけ</label>

例えば、

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

それでおしまい。

于 2013-05-29T10:25:05.453 に答える