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

Question

我为复选框创建了一个很酷的主题，它将它们呈现为带有动画的iOS-5样式按钮，都是用CSS编写的，但是我有这个恼人的问题，因为没有在webkit上为圆角剪裁背景。我知道这个bug是因为裁剪容器有导致这个问题的position，但是我想不出有什么方法来解决这个问题。

有人知道如何处理这个问题吗？

我钻研了这个bug，没有发现任何有用的东西。10倍！

检查演示 (在火狐上工作得很好)

​

Answer 1

比以前好多了..。但还是不完美。

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

在标签中添加边框半径：“前”和“标签”：“后”并隐藏复选框：

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

应该能解决这个问题。

这是一个小摆设：http://jsfiddle.net/XCKau/2/

我建议你不要在输入上放一个显示:没有！只是想确定一下。-刚刚测试过它:当它不在display: none;中时，使用IE8的人仍然可以使用复选框。如果你真的使用它，他们就不能“检查”任何东西。