复选框 | 自定义CSS美化后的复选框

最近在为博客添加评论回复时发邮件,在发表评论时,可以由用户决定是否有回复时邮件通知,这个复选框原来的样式很不好看,所以决定来一次美化,以下是美化的全部操作,可以自行修改成更多的、漂亮的样式出来。思路:先隐藏原来的复选框、自定义一个外框、自定义一个Checked时的样式如打勾、Label的其它美化

一、Html结构:

二、CSS样式:

三、完成后的效果:

上面只是其中的一种效果,继续折腾了一下,于是有了下面二种效果,其实这种自定义的复选框可以自行CSS出好多种效果,最终本站用的绿红按钮间切换的。HTML结构是一样的,下面只贴出不同的CSS.

一、有打勾渐变效果的:

效果图如下:

二、带ON、OFF的效果:

效果图如下: