美化radio

1. label.bui-radios-label input {
2. position: absolute;
3. opacity: 0;
4. visibility: hidden;
5. }
6.  
7. label.bui-radios-label .bui-radios {
8. display: inline-block;
9. position: relative;
10. width: 13px;
11. height: 13px;
12. background: #FFFFFF;
13. border: 1px solid #979797;
14. border-radius: 50%;
15. vertical-align: -2px;
16. }
17.  
18. label.bui-radios-label input:checked + .bui-radios:after {
19. position: absolute;
20. content: "";
21. width: 7px;
22. height: 7px;
23. background-color: #fff;
24. border-radius: 50%;
25. top: 3px;
26. left: 3px;
27. }
28.  
29. label.bui-radios-label input:checked + .bui-radios {
30. background: #00B066;
31. border: 1px solid #00B066;
32. }
33.  
34. label.bui-radios-label input:disabled + .bui-radios {
35. background-color: #e8e8e8;
36. border: solid 1px #979797;
37. }
38.  
39. label.bui-radios-label input:disabled:checked + .bui-radios:after {
40. background-color: #c1c1c1;
41. }
42.  
43. label.bui-radios-label.bui-radios-anim .bui-radios {
44. -webkit-transition: background-color ease-out .3s;
45. transition: background-color ease-out .3s;
46. }
47. html:
    1. <label class="bui-radios-label bui-radios-anim">
    2. <input type="radio" name="sex"/><i class="bui-radios"></i> 男
    3. </label>
    4. 1. <label class="bui-radios-label bui-radios-anim">
       2. <input type="radio" name="sex"/><i class="bui-radios"></i> 女
       3. </label>
       
       
    1.