HTML/CSS switch开关

2021-02-09 08:15

阅读：719

YPE html>

标签：NPU init order input web tab mic htm otto

主要利用了label标签和input type=‘checkbox‘标签

技术图片

switch1

"en">"UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    Document开关切换

class="switch">
  "checkbox">
  class="slider">


class="switch">
  "checkbox" checked>
  class="slider">


class="switch">
  "checkbox">
  class="slider round">


class="switch">
  "checkbox" checked>
  class="slider round">

技术图片

switch2

"en">

"UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    Documentclass="example-con">
        默认
    
        class="mui-tab-con clearfix">
            class="mui-form" name="" method="post" action="#" id="">
                
表单标题
                    class="mui-switch-con">
                        class="mui-switch" type="checkbox"> 默认未选中
                    
                    class="mui-switch-con">
                        class="mui-switch" type="checkbox" checked> 默认选中
                    
    
                

        
    class="prettyprint lang-html linenums:1">
    <label><input class="mui-switch" type="checkbox"> 40664;35748;26410;36873;20013;</label&gt;
    <label><input class="mui-switch" type="checkbox" checked> 40664;35748;36873;20013;</label&gt;
    
    
    class="example-con">
        简单的背景过渡效果 switch

           加 mui-switch-animbg 类即可
        class="mui-tab-con clearfix">
            class="mui-form" name="" method="post" action="#" id="">
                
表单标题
                    class="mui-switch-con">
                        class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中
                    
                    class="mui-switch-con">
                        class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中
                    
    
                

        
    class="prettyprint lang-html linenums:1">
    <label><input class="mui-switch mui-switch-animbg" type="checkbox"> 40664;35748;26410;36873;20013;</label&gt;
    <label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 40664;35748;36873;20013;</label&gt;
    
    
    class="example-con">
        过渡效果的switch
           加 mui-switch-anim 类即可
        class="mui-tab-con clearfix">
            class="mui-form" name="" method="post" action="#" id="">
                
表单标题
                    class="mui-switch-con">
                        class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中
                    
                    class="mui-switch-con">
                        class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中
                    
    
                

        
    class="prettyprint lang-html linenums:1">
    <label><input class="mui-switch mui-switch-anim" type="checkbox"> 40664;35748;26410;36873;20013;</label&gt;
    <label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 40664;35748;36873;20013;</label&gt;

HTML/CSS switch开关

标签：NPU init order input web tab mic htm otto

原文地址：https://www.cnblogs.com/it-Ren/p/13062999.html

上一篇：1 urllib库（了解）

下一篇：mxnet decord 视频读取和载入

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML/CSS switch开关
文章链接：http://soscw.com/index.php/essay/53002.html

亲，登录后才可以留言！

HTML/CSS switch开关

开关切换

默认

简单的背景过渡效果 switch

过渡效果的switch

评论

热门文章

推荐文章

最新文章

置顶文章