自定義CSS3復選框不適用於Firefox或IE

Question

小提琴： http ： //jsfiddle.net/V98W8/

我有一個自定義復選框，在Chrome中看起來很完美，但在Firefox或IE瀏覽器中顯示完全破碎。

我已經嘗試添加自定義前綴和一切，但它似乎沒有解決問題。

#milestone-table input[type="checkbox"] {
    -webkit-appearance: none;
      -moz-appearance: none;
    appearance: none;
    background-color: #fafafa;
    border: 1px solid lightgrey;
    border-radius: 26px;

    -webkit-box-shadow: inset 0 0 0 1px lightgrey;
    box-shadow: inset 0 0 0 1px lightgrey;
    cursor: pointer;
    height: 28px;
    position: relative;

    -webkit-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    -moz-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    -o-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    -ms-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    width: 54px;
    vertical-align: top;
    outline: none;
}

#milestone-table .controls input[type="checkbox"] {
    margin-top: 10px;
}

#add-milestone {
    position: relative;
    top: 7px;
    left: 90%;
}

#milestone-table {
    margin-top: -20px;
}

#milestone-table input[type="checkbox"]:after {
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 24px;

    -webkit-box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1);
    content: '';
    display: block;
    height: 24px;
    left: 0;
    position: absolute;
    right: 26px;
    top: 0;

    -webkit-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    -moz-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    -o-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    -ms-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    transition: border .25s .15s, left .25s .1s, right .15s .175s;
}

#milestone-table input[type="checkbox"]:checked {
    border-color: #53d76a;

    -webkit-box-shadow: inset 0 0 0 13px #53d76a;
    box-shadow: inset 0 0 0 13px #53d76a;
    padding-left: 18px;

    -webkit-transition: border .25s, box-shadow .25s, padding .25s .15s;
    -moz-transition: border .25s, box-shadow .25s, padding .25s .15s;
    -o-transition: border .25s, box-shadow .25s, padding .25s .15s;
    -ms-transition: border .25s, box-shadow .25s, padding .25s .15s;
    transition: border .25s, box-shadow .25s, padding .25s .15s;
}

#milestone-table input[type="checkbox"]:checked:after {
    border-color: #53d76a;
    left: 26px;
    right: 0;

    -webkit-transition: border .25s, left .15s .25s, right .25s .175s;
    -moz-transition: border .25s, left .15s .25s, right .25s .175s;
    -o-transition: border .25s, left .15s .25s, right .25s .175s;
    -ms-transition: border .25s, left .15s .25s, right .25s .175s;
    transition: border .25s, left .15s .25s, right .25s .175s;
}

Answer 1

可悲的是，據我所知，這是Firefox中的一個老版本，尚未修復。 如果它們最近沒有改變（從你的問題來看，它們沒有改變），無論你做什么，樣式復選框和單選按鈕在Firefox中都無法正常工作。

通常，解決此問題的常用方法是簡單地使用常規div並讓它們通過javascript或類似方法切換隱藏字段。 絕對不是一個漂亮的解決方案，但在他們修復這個bug之前，你無能為力。

我做了一個快速示例 ，使用隱藏的復選框和標簽實現至少有效的東西。 當然，它不僅僅是使用常規輸入標簽，但它應該在Firefox中工作（我猜IE，但我還沒有測試）。

<div id="milestone-table">
    <p>Checkbox</p>
    <label>
        <input type="checkbox"/>
        <label class="checkbox"/>
    </label>
</div>