Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式，甚至可以让它看起来一点也不像复选框。
怎样进行Checkbox复选框的样式修改
首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。
隐藏掉所有的Checkbox复选框后，我们需要添加一个labelHTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。
checkbox-one
此复选框风格就像一个解锁滑块，滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签)，将会选中复选框，然后滑块移动到ON位置。
我们开始创建复选框区的HTML。
CheckboxOne
因为这个样式的复选框，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做黑色条带和圆角。
现在这个滑块在选中(关闭)位置，当我们选中复选框，我们希望有一个反应发生，所以我们可以移动滑块到另一端。我们需要知道，判断复选框被选中，如果是则改变label元素的left属性。
checkbox-two
此复选框风格像样式一样，但不同的是，这个滑块按钮会改变颜色。当您单击滑块按钮，它移动到条带的另一边，并改变按钮的颜色。
HTML代码和样式一是完全一样的。
结束语：以上就是关于怎样进行Checkbox复选框的样式修改的全部内容，更多内容请关注学步园。