Question

我纯粹在CSS中使用样式复选框。但是，我的样式在chrome中运行良好，但在firefox中不起作用。 Here是我的代码

如何在两种浏览器中完成此工作？

input[type="checkbox"] {
    height:22px;
    width: 22px;
}
input[type="checkbox"]:before{
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #808080;
    content: "";
    background: #FFF;
    border-radius: 10px;
}
input[type="checkbox"]:after{
    position: relative;
    display: block;
    left: 2px;
    top: -20px;
    width: 16px;
    height: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
    content: "";
    background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
    background-repeat: no-repeat;
    background-position:center;
    border-radius: 10px;
}
input[type="checkbox"]:checked:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
}
input[type="checkbox"]:disabled:after{
    /*-webkit-filter: opacity(0.4);*/
    opacity: 0.4;
}
input[type="checkbox"]:not(:disabled):checked:hover:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
}
input[type="checkbox"]:not(:disabled):hover:after{
    background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);  
    border-color: #85A9BB #92C2DA #92C2DA #85A9BB;  
}
input[type="checkbox"]:not(:disabled):hover:before{
    border-color: #3D7591;
}

Answer 1

我在互联网上搜索了一个解释或修复了你的问题，而且我发现这个问题并不容易解决。这个问题是firefox的一个老bug，还有待修复。

可悲的是，没有统一的方法来解决你的问题。然而，我找到了一个工作，我相信你可以操纵，以满足您的需求。

最好的解决方法是为div切换一些标签并隐藏不同的按钮状态。您可以在此处查看http://jsfiddle.net/kSxBK/1，请务必查看此http://jsfiddle.net/V98W8/。

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

我不确定这正是你要找的，但我希望你的麻烦能够平息。

一切顺利，

亨利

样式复选框在chrome上工作，但在firefox上无法正常工作

1 个答案: