首页 > 其他 > 详细

开关制作源代码

时间:2019-01-12 15:52:45      阅读:47      评论:0      收藏:0      [点我收藏+]

标签:input   css   -c   htm   charset   color   text   meta   osi   

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             *{margin:0;padding:0;}
 8             label{
 9                 display: block;
10                 width:160px;
11                 height:80px;
12                 background:#ccc;
13                 margin:100px auto;
14                 border-radius: 40px;
15                 position: relative;
16             }
17             label span{
18                 display: block;
19                 width:80px;
20                 height:80px;
21                 border-radius: 50%;
22                 background:#000;
23                 position: absolute;
24                 left:0;top:0;
25                 transition:1s;
26             }
27             input{
28                 display: none;
29             }
30             input:checked+label{
31                 background:red;
32             }
33             input:checked+label span{
34                 left:80px;
35                 background: green;
36             }
37         </style>
38     </head>
39     <body>
40         <form action="" method="post">
41             <input type="radio" name="" id="labtext" value="" />
42             <label for="labtext"><span></span></label>
43         </form>
44     </body>
45 </html>

 

开关制作源代码

标签:input   css   -c   htm   charset   color   text   meta   osi   

原文:https://www.cnblogs.com/liufuyuan/p/10259895.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号