自定义checkbox和radio

checkbox和radio两个控件想必大家会经常遇到，但是设计的样式，功能的实现远远不能只用控件就能实现的，所以我们要自己定义自己的checkbox和radio；checkbox和radio需求不简简单单的只点击控件去勾选或选中，有时会点击字体也要勾选或选中，下面我教大家写自己的checkbox和radio，不多说先看效果图：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8">
  5     <title>checkbox</title>
  6     <style type="text/css">
  7     .checkboxs{
  8         width: 100%;
  9         height: 50px;
 10         background-color: #eee;
 11         margin-bottom: 10px;
 12     }
 13     .checkboxs label{
 14         line-height: 50px;
 15         height: 50px;
 16         display: inline-block;
 17         width: 150px;
 18         position: absolute;
 19         text-indent: 2.5rem;
 20         border:1px solid red;
 21     }
 22     .checkboxs label:after{
 23         content: "";
 24         position: absolute;
 25         width: 15px;
 26         height: 15px;
 27         top: 17px;
 28         left: 10px;
 29         border:1px solid #333;
 30         border-radius: 4px;
 31     }
 32     .checkboxs input:checked + label:before{
 33         content: "";
 34         position: absolute;
 35         border: 1px solid red;
 36         width: 5px;
 37         height: 10px;
 38         top: 18px;
 39         left: 15px;
 40         transform: rotate(35deg);
 41         border-left-style: none;
 42         border-top-style: none;
 43         z-index: 1;
 44     }
 45     .checkboxs input{
 46         display: none;
 47     }
 48 
 49 
 50     .radios label{
 51         line-height: 50px;
 52         height: 50px;
 53         display: inline-block;
 54         width: 150px;
 55         position: relative;
 56         text-indent: 2.5rem;
 57     }
 58     .radios input{
 59         display: none;
 60     }
 61     .radios {
 62         width: 100%;
 63         height: 50px;
 64         background-color: #eee;
 65     }
 66     .radios label{
 67         border:1px solid red;
 68     }
 69     .radios label:after{
 70         content: "";
 71         position: absolute;
 72         width: 15px;
 73         height: 15px;
 74         top: 17px;
 75         left: 10px;
 76         border:1px solid #333;
 77         border-radius: 100%;
 78     }
 79     .radios input:checked + label:before{
 80         content: "";
 81         position: absolute;
 82         width: 7px;
 83         height: 7px;
 84         top: 22px;
 85         left: 15px;
 86         background-color: green;
 87        border-radius: 50px;
 88         z-index: 1;
 89     }
 90 
 91     </style>
 92 </head>
 93 <body>
 94     <div class="checkboxs">
 95         <input id="checkbox1" type="checkbox">
 96         <label for="checkbox1">点击选择框</label>
 97     </div>
 98     <div class="radios">
 99         <input id="radio1" type="radio" name="a" checked>
100         <label for="radio1">男</label>
101         <input id="radio2" type="radio" name="a">
102         <label for="radio2">女</label>
103     </div>
104     
105 </body>
106 </html>

 

核心技术：

checkboxs label:after这个是根据label的伪类写的样式定义的是选择框的样式，可以自己更改自己想要的效果；

checkboxs input:checked + label:before这个我分开说明input:checked是原控件选中状态；+加号是兄弟选择器（sibling combinator），来组合前后两个选择器，选择器中的元素有相同的父元素，并且第二个必须紧随着第一个出现；label:before也是伪类元素，是对号样式。

<input id="radio1" type="radio" name="a" checked>
<label for="radio1">男</label>

id和for必须相同这是绑定input和label两个控件让点击文字的时候也会勾选。

这个只是我个人感觉比较简单的实现功能需求，有更简单或错误的地方请指出，虚心请教，我还是小白，

谢谢！

 

posted @ 2017-10-19 14:11  zenderdi  阅读(221)  评论(0)    收藏  举报