使用CSS3美化复选框checkbox

我们知道HTML默认的复选框样式十分简陋，而以图片代替复选框的美化方式会给页面表单的处理带来麻烦，那么本文将结合实例来了解一下使用CSS3将复选框checkbox进行样式美化，并且带上超酷的滑动效果。一般我们处理input都会用label的for属性与input的ID关联，这样的话，用户点击label的时候，实际上就相当于点击了那个input，通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:after伪元素来制作各种效果，如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现，结果如下

勾选样式

See the Pen mJWjra by dsky (@dsky) on CodePen.

单按钮

See the Pen jPBpyb by dsky (@dsky) on CodePen.

移动端开关

See the Pen PqpBpv by dsky (@dsky) on CodePen.

开启和关闭

See the Pen qdryjo by dsky (@dsky) on CodePen.

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

on learning