信很多前端開(kāi)發(fā)人員都會(huì)遇到boss讓修改checkbox和radio樣式，畢竟自帶的樣式太丑了。后來(lái)我們發(fā)現(xiàn)修改自帶樣式并不是那么容易，最后直接使出殺手锏——點(diǎn)擊之后替換圖片。

今天教大家一種方法，不用替換圖片，隨意修改樣式。還是先看效果圖：

先講一下原理：將input和label綁定，我們會(huì)發(fā)現(xiàn)，點(diǎn)擊label的時(shí)候也會(huì)觸發(fā)點(diǎn)擊input事件，所以秘訣就是把input隱藏掉，向label添加偽元素 :before替代前面的容器，：after替代選中之后的標(biāo)志。通過(guò)修改:before和:after樣式，就能實(shí)現(xiàn)各式各樣的單選復(fù)選框了。

一、修改普通復(fù)選框樣式

廢話不多說(shuō)，直接上代碼：

上面代碼中“+”代表選中該元素后一個(gè)兄弟元素，“：checked”表示選中狀態(tài)。

二、修改單選框樣式

這里要注意一下，單選范圍內(nèi)所有的name要保持一致。

三、自定義其他樣式

這個(gè)舉個(gè)實(shí)現(xiàn)開(kāi)關(guān)性質(zhì)的樣式提供參考，更多樣式，需要自己去探索發(fā)現(xiàn)。

四、總結(jié)

以后再也不用擔(dān)心修改單選復(fù)選框樣式問(wèn)題了，樣式想怎么改就怎么改。給大家留個(gè)問(wèn)題：input和label綁定的樣式還有很多，舉一反三，思索一下還能應(yīng)用在哪方面？

有問(wèn)題，歡迎隨時(shí)聯(lián)系我，我是竹風(fēng)，希望與各位前端愛(ài)好者共同學(xué)習(xí)交流！

言

圖片切換在目前的web或者app應(yīng)用中早已不是新鮮事，尤其是在App首頁(yè)頂部推薦中會(huì)經(jīng)常用到，今天就給大家推薦幾款Github上開(kāi)源的圖片滑動(dòng)切換庫(kù)。

slick

slick一款功能異常強(qiáng)大的圖片切換效果庫(kù)，支持各種動(dòng)畫(huà)效果和樣式，運(yùn)行效果如下圖所示。

slick運(yùn)行效果

目前slick在Github上的信息如下圖所示。

github上的信息

目前star數(shù)已經(jīng)達(dá)到了18k+，可以說(shuō)是非常火熱的一個(gè)開(kāi)源庫(kù)了。

• 安裝

可以通過(guò)npm或者bower進(jìn)行安裝。

安裝

• 實(shí)現(xiàn)

首先看下html代碼，是一個(gè)很簡(jiǎn)單的div代碼塊。

html代碼

然后是js代碼進(jìn)行調(diào)用，其中包含一些常用的配置。

js代碼調(diào)用

slick庫(kù)唯一的缺點(diǎn)就是依賴于jQuery，現(xiàn)在已經(jīng)沒(méi)人喜歡用jQuery了，希望slick庫(kù)能脫離jQuery，那樣就會(huì)更受歡迎了。

swipe

swipe是一款輕量級(jí)的圖片滑動(dòng)切換的庫(kù)，對(duì)移動(dòng)端表現(xiàn)出完美的支持，運(yùn)行效果如下。

swipe插件運(yùn)行效果

目前swipe在Github上的信息如下所示。

swipe在github上的信息

• 安裝

swipe同樣支持npm和bower安裝的方式。

安裝

• 使用

使用swipe插件也非常的簡(jiǎn)單，首先定義html元素。

html元素

然后定義CSS樣式。

CSS樣式

最后通過(guò)js代碼進(jìn)行調(diào)用。

js代碼調(diào)用

總結(jié)

今天這篇文章給大家總結(jié)了兩個(gè)非常實(shí)用的圖片滑動(dòng)切換插件，分別支持PC端和移動(dòng)端，歡迎自己動(dòng)手體驗(yàn)。