自定义CSS3复选框在Firefox或IE上不起作用 [英] Custom CSS3 Checkbox doesn't work on Firefox or IE

问题描述

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

我有一个自定义复选框，在Chrome中看起来和工作完美，但在Firefox或IE中显示完全崩溃。

I have a custom checkbox which looks and works perfectly in Chrome, but somehow in Firefox or IE shows up completely broken.

自定义前缀和一切，但它似乎不解决问题。

I have tried adding custom prefixes and everything but it doesn't seem to solve the problem.

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

推荐答案

在Firefox中的bug，据我所知还没有被修复。如果他们没有改变这最近（从你的问题，从他们没有），样式复选框和单选按钮简直不能正常工作在Firefox无论你做什么。

Sadly, this is an old bug in Firefox that as far as I know hasn't been fixed. If they haven't changed this very recently (which, judging from your problem, they haven't), styling checkboxes and radio buttons simply doesn't work properly in Firefox no matter what you do.

一般来说，解决这个问题的一个常见方法是简单地使用正则div，并让他们通过javascript或类似的切换隐藏字段。绝对不是一个漂亮的解决方案，但直到他们修复这个bug，你没有太多可以做。

Generally, a common way to work around this is by simply using regular divs and letting them toggle hidden fields through javascript or similar. Absolutely not a pretty solution, but until they fix this bug, there's not much you can do.

我做了一个快速示例，使用隐藏复选框和标签实现至少工作的东西。当然，它不像仅仅使用一个常规的输入标签，但它应该在Firefox（我猜，IE，但我没有测试）。

I made a quick example that uses a hidden checkbox and a label achieve something that works at least. Of course, it isn't as pretty as merely using a regular input tag, but it should work in Firefox (and I guess IE, but I haven't tested).

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

这篇关于自定义CSS3复选框在Firefox或IE上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！