【譯】使用Checkbox Hack技術能夠作的事

本文首發於：github.com/bigo-fronte… 歡迎關注、轉載。

本文由bigo前端翻譯小組翻譯，原文連接：The 「Checkbox Hack」 (and things you can do with it)

什麼是Checkbox Hack

Checkbox Hack技術就是複選框 <input type=「checkbox」>結合<label>標籤，經過複選框的選中來控制一些元素的樣式，好比：

<label for="toggle">Do Something</label>
<input type="checkbox" id="toggle」> <div class="control-me">Control me</div>
複製代碼

而後你能夠經過使用絕對定位或者設置opacity:0，把複選框隱藏起來。雖然複選框已被隱藏，可是你點擊<label>標籤元素，複選框的選中與否仍然能夠被修改。而後，你可使用相鄰的兄弟選擇器（~）根據input標籤的:checked狀態對<div>進行不一樣的樣式設置。

.control-me { /* Default state */}
#toggle:checked ~ .control-me { /* A toggled state! No JavaScript! */}
複製代碼

所以，你能夠徹底根據該複選框的狀態來設置元素的不一樣樣式，超級簡便。下面咱們來看下，使用「Checkbox Hack」技術能夠作的一些例子。

demo源碼

1.自定義單選按鈕、複選框樣式

demo源碼

您能夠隱藏單選按鈕或複選框的默認UI，並在其頂部顯示自定義版本樣式。

更多資料可參考：

• Pioneered by Ryan Seddon
• Similar by Martin Ivanov
• For use on Wufoo forms by me

2.文件系統，如「樹形結構菜單」

demo源碼

3.Tab標籤頁

checkbox hack技術很是適合這種在不一樣區域之間切換的tab標籤頁設計模式。使用單選按鈕來代替狀態獨立的複選框，在每一個單選按鈕中，一次只能啓用一個選項卡（例如一次只能激活一個選項卡)。

demo來源：Demo from Functional CSS tabs revisited

4.下拉菜單

demo源碼

5.switch開關

能夠用<input type="checkbox」>來實現一個表單的ON / OFF切換功能, 就像這個表情符號切換功能例子！

demo源碼

或者能夠用多個<input type="checkbox">元素實現不一樣的選項值切換。

在這個MPG計算器例子中，按鈕元素均爲<input type="radio">類型。

6.FAQ答案揭示

demo源碼

這時候, 你可能會想到使用<details>和<summary>組合來實現這個摺疊功能，可是利用 checkbox hack也能夠實現這個答案區域的展現功能。

7.隱藏側邊欄

demo源碼

相似之前的Octopress主題。

歡迎你們留言討論，祝工做順利、生活愉快！

我是bigo前端，下期見。