-
复选框是一个HTML元素，每个网站都可以使用它。但是大多数人不为他们设置样式，所以他们在大多数网站上看起来都一样。你为什么不在你的网站上设置一个不同样式的复选框，甚至让它看起来像一个复选框。
在本教程中，我们将创建5个不同的选择框，您可以在网站上使用它们。
查看演示程序，您可以看到我们要创建的复选框样式。
演示地址
首先，您需要添加一段CSS来隐藏所有复选框复选框，然后我们将更改它的外观。
CSS代码将内容复制到剪贴板。
*隐藏默认复选框
* /
输入{类型=复选框} {
可见性：隐藏；
}
隐藏所有复选框后，我们需要添加一个标签html元素。我们都知道，当单击属性标签标签时，将选择相应的复选框复选框，这意味着我们可以通过标签单击事件处理复选框。
样式1
复选框样式类似于一个未打开的滑块，滑块的选择和未选中的状态将显示在不同的位置。当您单击滑块按钮（标签标签）时，复选框将被选中，滑块移动到ON位置。
我们开始在复选框区域创建HTML。
xml代码将内容复制到剪贴板。
一个复选框
由于这种样式的复选框，标签不足以完成任务。我们使用div元素来包含复选框。我们需要用它们来制作黑色条纹和圆角。
CSS代码将内容复制到剪贴板。
*创建滑动条
* /
{。checkboxone
宽度：40px；
身高：10px；
背景：# 555；
保证金：20px 80px；
职位：相对；
边界半径：3px；
}
现在，我们可以使用标签作为滑块上的条纹。我们希望按钮效果会从条纹的一边移动到另一边。我们可以添加标签的转换。
CSS代码将内容复制到剪贴板。
*从标签创建滑块
* /
checkboxone {标签。
显示块；
宽度：16px；
身高：16px；
边框半径：50%；
WebKit的过渡：all.5s缓解；
-moz过渡：all.5s缓解；
- O转换：all.5s缓解；
MS：all.5s缓解过渡；
过渡：all.5s缓解；
光标：指针；
位置：绝对；
上图：- 3px；
左：- 3px；
背景：# CCC；
}
现在滑块正在被选中（关闭）。当我们检查复选框时，我们希望会发生一个响应，这样我们就可以将滑块移动到另一端。我们需要知道复选框被选中了，如果是的话，标签元素的左属性就改变了。
CSS代码将内容复制到剪贴板。
*如果选中复选框，则将滑块移动到正确的位置。
* /
。checkboxone输入{类型=复选框：检查+标签{ }
左：27px；
}
这是您需要的第一个复选框的CSS。
风格两
复选框样式类似，但不同的是滑块按钮会改变颜色。当你点击滑块按钮时，它移动到条的另一边，改变按钮的颜色。
HTML代码和样式之一是完全相同的。
xml代码将内容复制到剪贴板。
复选框的两
这个div将成为一个比样式更大的条带，标签仍然是一个滑块，它使用下面的CSS来定义它。
CSS代码将内容复制到剪贴板。
*复选框两
* /
{。checkboxtwo
宽度：120px；
身高：40px；
背景：# 333；
保证金：20px 60px；
边界半径：50px；
职位：相对；
}
在图案中间有一条黑条。滑动条将沿着它滑动，但div元素已经被使用了。因此我们需要在伪类之前创建一个新元素。
CSS代码将内容复制到剪贴板。
*创建圆的直线移动
* /
{ checkboxtwo：之前。
内容；
位置：绝对；
上图：19px；
左：14px；
身高：2px；
宽度：90px；
背景：# 111；
}
样式是一个接一个的，然后我们为标签编写CSS样式并将其用作滑块。
CSS代码将内容复制到剪贴板。
*创建圆圈点击
* /
checkboxtwo {标签。
显示块；
宽度：22px；
身高：22px；
边框半径：50%；
WebKit的过渡：all.5s缓解；
-moz过渡：all.5s缓解；
- O转换：all.5s缓解；
MS：all.5s缓解过渡；
过渡：all.5s缓解；
光标：指针；
位置：绝对；
上图：9px；
Z指数：1；
左：12px；
背景：# DDD；
}
我想实现与样式相似的选定状态，并在选择时更改标签的左侧和后台属性。
CSS代码将内容复制到剪贴板。
*为复选框创建单击事件
* /
。checkboxtwo输入{类型=复选框：检查+标签{ }
左：84px；
背景：# 26ca28；
}
样式三
复选框样式比样式2更复杂。它将与前面的示例大致相同。当改变选中的或未选中的状态时，滑块滑到另一边并在原始位置显示相应的文本。
首先，我们编写HTML代码，它与前面的代码相同。
xml代码将内容复制到剪贴板。
复选框三
然后，我们使用相同的方法使用div作为滑块，下面的代码创建一个黑色圆角条。我们可以把滑块和文本放入其中。
CSS代码将内容复制到剪贴板。
*复选框三
* /
{。checkboxthree
宽度：120px；
身高：40px；
背景：# 333；
保证金：20px 60px；
边界半径：50px；
职位：相对；
}
当滑块不选，滑块将左侧和右侧，将显示OFF当单击滑块将移到右侧，和左侧会显示ON。
但是，元素的数量对于我们实现这些功能是不够的。所以我们需要通过使用前后两伪类创建两个要素：，on，和off，分别。
CSS代码将内容复制到剪贴板。
*为ON位置创建文本
* /
{ checkboxthree：之前。
内容：开；
位置：绝对；
上图：12px；
左：13px；
身高：2px；
颜色：# 26ca28；
字体大小：16px；
}
*为关闭位置创建标签
* /
{ checkboxthree：后。
内容：开；
位置：绝对；
上图：12px；
左：84px；
身高：2px；
颜色：# DDD；
字体大小：16px；
}
和前面一样，我们添加滑块的样式，当它被点击时，它移动到另一边并改变颜色。
CSS代码将内容复制到剪贴板。
*创建药片点击
* /
checkboxthree {标签。
显示块；
宽度：52px；
身高：22px；
边界半径：50px；
WebKit的过渡：all.5s缓解；
-moz过渡：all.5s缓解；
- O转换：all.5s缓解；
MS：all.5s缓解过渡；
过渡：all.5s缓解；
光标：指针；
位置：绝对；
上图：9px；
Z指数：1；
左：12px；
背景：# DDD；
}
*为标签创建复选框事件
* /
。checkboxthree输入{类型=复选框：检查+标签{ }
左：60px；
背景：# 26ca28；
}
样式四
在这种样式中，我们创建两个圆，并在内部改变圆形颜色，以表示单击时选中的和未选中的状态。
与前面相同的HTML代码。
xml代码将内容复制到剪贴板。
复选框四
接下来，我们必须为复选框创建一个外部循环，使用CSS的边框半径属性，并设置为100%创建一个正循环。
CSS代码将内容复制到剪贴板。
复选框四
然后我们使用标签元素创建一个较小的圆，它根据复选框状态改变颜色。
CSS代码将内容复制到剪贴板。
*创建复选框按钮
* /
checkboxfour {标签。
显示块；
宽度：30px；
身高：30px；
边界半径：100px；
WebKit的过渡：all.5s缓解；
-moz过渡：all.5s缓解；
- O转换：all.5s缓解；
MS：all.5s缓解过渡；
过渡：all.5s缓解；
光标：指针；
位置：绝对；
上图：5px；
左：5px；
Z指数：1；
背景：# 333；
Webkit框阴影：插图0px 1px 3px RGBA（0,0,0,0.5）；
-moz盒阴影：插图0px 1px 3px RGBA（0,0,0,0.5）；
盒子的影子：插图0px 1px 3px RGBA（0,0,0,0.5）；
}
选中复选框后，我们更改内圈的背景色以表示选定的状态。
CSS代码将内容复制到剪贴板。
*创建检查状态
* /
。checkboxfour输入{类型=复选框：检查+标签{ }
背景：# 26ca28；
}
样式五
复选框在风格上有些不同。它看起来比浏览器的默认复选框样式稍微好一点，但不同的是我们可以根据它的需要定义它的样式。
首先，相同的HTML代码
xml代码将内容复制到剪贴板。
复选框五
在前面的示例中，我们使用div作为复选框的滑块或外圆，但这一次我们不需要使用div来设置复选框区域。
CSS代码将内容复制到剪贴板。
*复选框五
* /
{。checkboxfive
宽度：25px；
保证金：20px 100px；
职位：相对；
}
标签标签用于单击事件和我们要定义的复选框的框样式。
CSS代码将内容复制到剪贴板。
*为复选框创建框
* /
checkboxfive {标签。
光标：指针；
位置：绝对；
宽度：25px；
身高：25px；
顶部：0；
左：0；
背景：# Eee；
边境：1px solid # DDD；
}
接下来，我们要在盒子中，创建一个复选标记，我们可以用它来创建一个新的伪类元素后，为了实现这样的风格，我们可以创建一个矩形5px X 9px和给他加了一个边框。当我们除去边境上和右之间，它看起来像一个字母L变换属性，我们可以使用CSS来让它转动，所以它看起来像一个复选标记。
CSS代码将内容复制到剪贴板。
*在复选框中显示刻度
* /
checkboxfive {标签：后。
不透明性：0.2；
内容；
位置：绝对；
宽度：9px；
身高：5px；
背景：透明；
上图：6px；
左：7px；
边境：3px固体# 333；
边界顶：无；
边界权：无；
WebKit的变换：旋转（45度）；
-moz变换：旋转（45度）；
- o-transform：旋转（45度）；
MS：旋转变换（45度）；
变换：旋转（45度）；
}
在上面的CSS，我们设置其不透明度为0.2，所以你会看到复选框有一个半透明的对勾。你可以更深一点，当你挂了，你可以将它设置为不透明，当你把它捡起来。
CSS代码将内容复制到剪贴板。
*创建蜱虫的悬停事件
* /
标签：：：。checkboxfive悬停在{
不透明性：0.5；
}
*为勾选创建复选框状态
* /
。checkboxfive输入{类型}：选中复选框后+标签：{
不透明性：1；
}