信很多前端开发人员都会遇到boss让修改checkbox和radio样式，毕竟自带的样式太丑了。后来我们发现修改自带样式并不是那么容易，最后直接使出杀手锏——点击之后替换图片。

今天教大家一种方法，不用替换图片，随意修改样式。还是先看效果图：

先讲一下原理：将input和label绑定，我们会发现，点击label的时候也会触发点击input事件，所以秘诀就是把input隐藏掉，向label添加伪元素 :before替代前面的容器，：after替代选中之后的标志。通过修改:before和:after样式，就能实现各式各样的单选复选框了。

一、修改普通复选框样式

废话不多说，直接上代码：

上面代码中“+”代表选中该元素后一个兄弟元素，“：checked”表示选中状态。

二、修改单选框样式

这里要注意一下，单选范围内所有的name要保持一致。

三、自定义其他样式

这个举个实现开关性质的样式提供参考，更多样式，需要自己去探索发现。

四、总结

以后再也不用担心修改单选复选框样式问题了，样式想怎么改就怎么改。给大家留个问题：input和label绑定的样式还有很多，举一反三，思索一下还能应用在哪方面？

有问题，欢迎随时联系我，我是竹风，希望与各位前端爱好者共同学习交流！

言

图片切换在目前的web或者app应用中早已不是新鲜事，尤其是在App首页顶部推荐中会经常用到，今天就给大家推荐几款Github上开源的图片滑动切换库。

slick

slick一款功能异常强大的图片切换效果库，支持各种动画效果和样式，运行效果如下图所示。

slick运行效果

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

github上的信息

目前star数已经达到了18k+，可以说是非常火热的一个开源库了。

• 安装

可以通过npm或者bower进行安装。

安装

• 实现

首先看下html代码，是一个很简单的div代码块。

html代码

然后是js代码进行调用，其中包含一些常用的配置。

js代码调用

slick库唯一的缺点就是依赖于jQuery，现在已经没人喜欢用jQuery了，希望slick库能脱离jQuery，那样就会更受欢迎了。

swipe

swipe是一款轻量级的图片滑动切换的库，对移动端表现出完美的支持，运行效果如下。

swipe插件运行效果

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

swipe在github上的信息

• 安装

swipe同样支持npm和bower安装的方式。

安装

• 使用

使用swipe插件也非常的简单，首先定义html元素。

html元素

然后定义CSS样式。

CSS样式

最后通过js代码进行调用。

js代码调用

总结

今天这篇文章给大家总结了两个非常实用的图片滑动切换插件，分别支持PC端和移动端，欢迎自己动手体验。