css複選框已選中的材質設計疊加層

Question

我正在嘗試執行一些像複選框這樣的花哨材質設計，但是當複選框被選中時，我遇到了應用疊加層的問題。下面是我迄今所做的一個例子：http://codepen.io/stefancenusa/pen/rVwEBB

input[type="checkbox"]:checked + label { 
    /*what should i write here?*/ 
} 

我打算做什麼：點擊複選框後，我想一個白色的覆蓋在中央蜱出現在有色圈。

這可能嗎？我怎樣才能做到這一點？

謝謝！

Answer 1

Fork

我給它一個鏡頭。希望能幫助到你。

input[type="checkbox"]:checked + label:before { 
    content: '✓'; 
    font-size: 2em; 
    line-height: 53px; 
    text-align: center; 
    display: block; 
    position: absolute; 
    width: 53px; 
    height: 53px; 
    top: 0; 
    left: 0; 
    color: #fff; 
} 

更新：調整了這一點...

您可以設置一個很酷的圖標替換的文本，通過一些其他的字體或background-image。