丸い角のコンテナにクリップされていない背景アニメーション

Question

私は、CSSでアニメーションのスタイルボタンをiOS-5のようにレンダリングするチェックボックスのクールなテーマを作成しましたが、丸められたコーナーのためのウェブキットで。私はクリッピングコンテナが事を起こしpositionを持っているので、このバグがあるけど、私はこの問題を解決する方法を考えることはできません。..

誰かがこの問題に対処する方法を知っていますか？
私はこのバグを掘り出して何も役に立たなかった。 10倍！

CHECK THE DEMO（Firefoxの上で素晴らしい作品）

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

をIと思います「確認済」状態を少し変更します。

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

しかし問題は、チェックボックスが表示されることです。

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

のような単純なものを追加するとよいでしょう。

ここjsfiddleです：http://jsfiddle.net/XCKau/2/

私はディスプレイ入れないように、あなたに助言する：なしを。入力に！念のために。 - ちょうどそれをテストしました：それがない場合はdisplay: none; IE8を使用している人々はまだチェックボックスを使用することができます。あなたがそれを使っているなら、彼らは何も確認することができません。