码迷,mamicode.com
首页 > 其他好文 > 详细

开关制作源代码

时间:2019-01-12 15:59:37      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:html   css   nbsp   display   label   add   text   color   ack   

 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>

 

开关制作源代码

标签:html   css   nbsp   display   label   add   text   color   ack   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!