1、首先我们写原生的html,添加几个checkbox与radio,代码如下： <body> &造婷用痃lt;h2>复选框</h2> <div> 语文<input type="checkbox" id="语文" class="gcs-checkbox"> <label for="语文"></label> 数学<input type="checkbox" id="数学" class="gcs-checkbox"> <label for="数学"></label> 英语<input type="checkbox" id="英语" class="gcs-checkbox"> <label for="英语"></label> 计算机<input type="checkbox" id="计算机" class="gcs-checkbox"> <label for="计算机"></label> </div> <br /> <hr /> <h2>单选按钮</h2> <div> 男<input type="radio" name="sex" class="gcs-radio" id="男" /> <label for="男"></label> 女<input type="radio" name="sex" class="gcs-radio" id="女" /> <label for="女"></label> </div> <hr /> </body>此时没有写css样式，所以是原生的效果，效果如下：
2、下面我们开始写css样式，首先给label元素加上样式，设置背景、宽高、显示方式等等，请看代码： .gcs-checkbox+label { background-color: white; border-radius: 0px; border: 1px solid #d3d3d3; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: bottom; line-height: 20px; } .gcs-radio+label { width: 20px; height: 20px; line-height: 20px; display: inline-block; text-align: center; vertical-align: bottom; border: 1px solid gray; border-radius: 50%; }效果如下：
3、接下来，我们需要把checkbox与radio给默认隐藏起来，因为我们是用label去模拟的，只需要加上一个属性 display: none;代码如下： .gcs-checkbox { display: none; } .gcs-radio { display: none; } 效果如下：
4、下面给label加上鼠标悬浮显示一个对勾的符号，主要是通过:after这个伪元素实现，如果不明白可以查阅下w3c手册，代码如下： .gcs-checkbox+label:hover { cursor: pointer; border: 1px solid #2783FB; } .gcs-checkbox:checked+label { background-color: #eee; background: #2783FB; } .gcs-checkbox:checked+label:after { content: "\2714"; color: white; } .gcs-radio+label:hover { border: 1px solid #2783FB; cursor: pointer; } .gcs-radio:checked+label { background: #2783FB; border: 1px solid #2783FB; } .gcs-radio:checked+label:after { content: "\2022"; font-size: 35px; color: white; }好了，现在已经完成了所有工作，效果如下：
5、最后，给大家贴上完整的代码，本教程完全使用css实现，没有使用一张图片， 也没有使用jquery,希望能够对您有所帮助。代洁船诼抨码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> /*复选框*/ .gcs-checkbox { display: none; } .gcs-checkbox+label { background-color: white; border-radius: 0px; border: 1px solid #d3d3d3; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: bottom; line-height: 20px; } .gcs-checkbox+label:hover { cursor: pointer; border: 1px solid #2783FB; } .gcs-checkbox:checked+label { background-color: #eee; background: #2783FB; } .gcs-checkbox:checked+label:after { content: "\2714"; color: white; } /*单选按钮*/ .gcs-radio {display: none; } .gcs-radio+label { width: 20px; height: 20px; line-height: 20px; display: inline-block; text-align: center; vertical-align: bottom; border: 1px solid gray; border-radius: 50%; } .gcs-radio+label:hover { border: 1px solid #2783FB; cursor: pointer; } .gcs-radio:checked+label { background: #2783FB; border: 1px solid #2783FB; } .gcs-radio:checked+label:after { content: "\2022"; font-size: 35px; color: white; } </style> <body> <h2>复选框</h2> <div> 语文<input type="checkbox" id="语文" class="gcs-checkbox"> <label for="语文"></label> 数学<input type="checkbox" id="数学" class="gcs-checkbox"> <label for="数学"></label> 英语<input type="checkbox" id="英语" class="gcs-checkbox"> <label for="英语"></label> 计算机<input type="checkbox" id="计算机" class="gcs-checkbox"> <label for="计算机"></label> </div> <br /> <hr /> <h2>单选按钮</h2> <div> 男<input type="radio" name="sex" class="gcs-radio" id="男" /> <label for="男"></label>女<input type="radio" name="sex" class="gcs-radio" id="女" /> <label for="女"></label> </div> <hr /> </body></html>