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