背景动画没有剪裁圆角容器

Question

我为复选框创建了一个很酷的主题，将它们渲染为带有动画的 iOS-5 样式按钮，所有这些都在CSS中，但是我有这个烦人的问题，背景没有被剪裁在webkit上圆角。我知道这个 bug 是因为剪切容器有position导致这个问题，但我想不出任何方法可以解决这个问题。

有人知道如何处理这个问题吗？ 我挖了这个bug没找到任何有用的东西。 10倍！

CHECK THE DEMO （适用于Firefox）

Answer 1

这比以前更好......但仍然不完美。

http://jsfiddle.net/XCKau/1/

在标签上添加border-radius：before和label：after并隐藏复选框：

.togglebox label::before{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.togglebox label::after{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
input[type=checkbox]{
    visibility:hidden;
}

Answer 2

添加它确实有效：

.togglebox label::before {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.togglebox label::after {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

我还对'已检查'状态进行了一些小修改：

.togglebox input:checked ~ label { left: -61px }

但问题是该复选框变为可见。添加一些简单的东西：

#chkbx {position: absolute; left: 10px;}

应该解决这个问题。

这是jsfiddle：http://jsfiddle.net/XCKau/2/

我建议你不要放一个显示器：无;关于输入！只是要确定。 - 刚试过它：当它不在display: none;时，使用IE8的人仍然可以使用复选框。如果你使用它，他们将无法“检查”任何东西。