背景動畫沒有修剪在圓角容器

我有一個很酷的主題爲複選框，使它們呈現爲iOS-5樣式按鈕與動畫，所有在CSS中，但我有這個討厭的問題，背景沒有被剪裁在圓角的webkit上。我知道這錯誤是因爲裁剪容器有position這導致的事情，但我想不出有什麼辦法來解決這個問題..背景動畫沒有修剪在圓角容器

有人知道如何處理這個問題？
我已經挖到這個bug沒有發現任何有用的東西。 10倍！

CHECK THE DEMO（在Firefox的偉大工程）

enter image description here

來源

2012-02-26 vsync

這是比以前好了...但還不夠完善。

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

來源

2012-02-26 12:13:00 Alex

爲什麼downvote？我寫到這不是完美的，但仍然比你的要好。 – Alex 2012-02-26 13:15:11

同意。爲什麼倒票？ – 2012-02-26 13:33:48

因爲很顯然我已經想到了這一點，並駁回了這個想法..沒有犯罪的隊友，我只是覺得吐在我的臉上，給我提供這樣的解決方案是不尊重我的CSS技能，顯然手頭上的問題遠遠大於舍入內部元素的一些角落...... :) – vsync 2012-02-26 19:32:42

添加該做的工作：

.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的人仍然可以使用複選框。如果你使用它，他們將無法'檢查'任何東西。

來源

2012-02-26 12:13:11

在我的瀏覽器中仍然不完美。 'visibility：hidden;'隱藏複選框怎麼樣？那樣有用嗎？ – Alex 2012-02-26 12:18:57

@Alex是什麼瀏覽器？我已經在每個主流瀏覽器上測試了我的jsfiddle，並且它可以工作（不包括 2012-02-26 12:44:04

說實話：我不認爲你會到達你可以到達的觀衆。 IE的份額仍然很大，所以任何人都應該能夠訪問基本的功能。 – 2012-02-26 13:08:23

背景動畫沒有修剪在圓角容器

回答

相關問題