美化瀏覽器的radio和checkbox樣式
阿新 • • 發佈：2019-02-14
先講一下原理：checkboxhack技術
我們使用CSS一些特殊的選擇器，然後配合單選框以及複選框自帶的一些特性，可以實現元素的顯示隱藏效果。然後通過一些簡單的擴充套件，我們可以不使用任何JavaScript程式碼實現類似：自定義的單複選框，“更多”展開與收起效果，選項卡切換效果，或是多級下拉列表效果等等。
相信很多前端開發人員都會遇到boss讓修改checkbox和radio樣式，畢竟自帶的樣式太醜了。後來我們發現修改自帶樣式並不是那麼容易，最後直接使出殺手鐗——點選之後替換圖片。
今天教大家一種方法，不用替換圖片，隨意修改樣式。
先講一下原理：兩個關鍵東東，一是偽類選擇器:checked，表示對應控制元件元素（單選框或是複選框）選中時的樣式；二就是加號
+相鄰兄弟選擇器，這個符號表示選擇後面的兄弟節點。於是，兩者配合，就可以輕鬆自如控制後面元素的顯示或者隱藏，或是其他樣式了。而如何讓單複選框選中和不選中了，那就是label標籤了哈，for屬性錨定對應的單選框或是複選框，然後點選這裡的label標籤元素的時候，對應的單複選框就會選中或是取消選中。然後，就有上面的效果啦！
radio 的css樣式：
radio的html:
checkbox的css樣式：
checkbox的html:
