# Pure CSS Animated Checkbox Design
[竹白記事本](https://www.youtube.com/watch?v=K1sL3wPisJw&t=1s)，學習紀錄，2019/03/24。

>[Pure CSS Animated Checkbox Design - How to make Custom Checkbox in Html and CSS - Tutorial](https://codersblock.com/blog/checkbox-trickery-with-css/)

###### tags: `:checked`

## CodePen
>[Pure CSS Animated Checkbox Design](https://codepen.io/CHUPAIWANG/pen/PLyVeJ)

<iframe height="265" style="width: 100%;" scrolling="no" title="Pure CSS Animated Checkbox Design" src="//codepen.io/CHUPAIWANG/embed/PLyVeJ/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/PLyVeJ/'>Pure CSS Animated Checkbox Design</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## :checked
>[CSS沒有極限 - Checkbox的妙用](https://wcc723.github.io/css/2013/10/07/css-chechbox/)

`:checked` 的偽元素，它可以判斷目前的 checkbox 及 radio 是否有被選核。