纯CSS实现表单元素的美化

今天被问到一个题目:用纯CSS实现表单元素(radio/checkbox)的美化。

我首先想到的就是把radio/checked隐藏,使用label的 for=””属性,最后给label设置两套css样式,没选中时一种,选中时一种。

简单实现代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS实现表单样式</title>
    <style>   
        .wrap{
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            position: relative;
            background-color: #ddd;
            margin: 5px 10px;
        }
        input[type=radio]{
            visibility: hidden;
        }
        .label{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            left: 5px;
            top: 5px;
            background-color: #999;
            transition: all 0.5s ease;
        }
      /* 此处一下两个样式不可颠倒 */
      .radio[type=radio]:hover + label{
            background-color: #666;
        }
      .radio[type=radio]:checked + label{
            background-color: darkgreen;
        }    
    </style>
</head>

<body>
   <div class="wrap">
           <input type="radio" id="radio1" name="gender" class="radio">
           <label for="radio1" class="label"></label>
   </div>male
   <div class="wrap">
           <input type="radio" id="radio2" name="gender" class="radio">
           <label for="radio2" class="label"></label>
   </div>female
</body>

</html>

效果图如下所示:
效果图

其实复选框跟这个是一样的,另外复选框还可以做出滑动的效果,只是设置样式不一样。

把代码稍微改动一下可以实现以下效果:
checkbox效果

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS实现表单样式</title>
    <style>   
        .wrap{
            display: inline-block;
            height: 10px;
            width: 50px;
            border-radius: 5px;
            position: relative;
            background-color: #ddd;
            margin: 10px 20px;
        }
        input[type=checkbox]{
            visibility: hidden;
        }
        .label{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: -5px;
            background-color: #999;
            transition: all 0.5s ease;
            cursor: pointer;
        }

        .radio[type=checkbox]:checked + label{
            left: 30px;
            background-color: green;
        }    

    </style>
</head>

<body>
   <div class="wrap">
           <input type="checkbox" id="radio" name="gender" class="radio">
           <label for="radio" class="label"></label>
   </div>
</body>

</html>