фоновая анимация не обрезается на контейнере с закругленными углами

Question

У меня есть классная тема для флажков, которая отображает их как кнопки стиля iOS-5 с анимацией, все в CSS, но у меня есть эта досадная проблема с тем, что фон не обрезается на веб-наборе для закругленные углы. Я знаю, что это ошибка , потому что в контейнере отсечения есть position, который вызывает проблему, но я не могу придумать, как это исправить ..

Кто-нибудь знает, как решить эту проблему?
Я копался в этой ошибке и не нашел ничего полезного. 10x!

ПРОВЕРЬТЕ ДЕМО (отлично работает на Firefox)

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

Я бы также внес небольшую модификацию в «проверенное» состояние:

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

Но проблема в том, что флажок становитсявидно тогда.Добавление чего-то простого, например:

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

должно решить эту проблему.

Вот jsfiddle: http://jsfiddle.net/XCKau/2/

Я советую вам не отображать дисплей: нет;на входе!Просто чтобы убедиться.- Только что проверил: когда он НЕ в display: none; люди, использующие IE8, все еще могут использовать флажок.Если вы его используете, они не смогут ничего «проверить».

Answer 2

Это лучше, чем раньше ... Но все же не идеально.

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

Добавить границу-радиус к метке: 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;
}