# 復選框切換開關與發光燈泡
[竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/02/15。

>[CSS Custom Checkbox Toggle Switch with Glowing Bulb Effetcs | Html and CSS](https://www.youtube.com/watch?v=m_J1NfEA85c)

###### tags: `:checked` `text-transform`

## CodePen
>[CodePen：復選框切換開關與發光燈泡](https://codepen.io/chupai/pen/OdwGmY)
<iframe height="265" style="width: 100%;" scrolling="no" title="切換開關" src="//codepen.io/chupai/embed/OdwGmY/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/OdwGmY/'>切換開關</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</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 是否有被選核。

## text-transform
控制文章字母的大小寫
- uppercase，字母均為大寫
- lowercase，字母均為小寫
- capitalize，定義單字的第一個字母大寫，其他字母小寫