其他分享
首页 > 其他分享> > HTML <label> 标签

HTML <label> 标签

作者:互联网

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

 

一下例子中在input设置了display: none;后还能获得焦点这个问题困扰了我好一会

 

<!DOCTYPE html> <html>
<head>     <title>cess练习</title>     <style>         .switch {             position: relative;             display: inline-block;             width: 60px;             height: 34px;         }
        .switch input {             display: none;         }
        .slider {             position: absolute;             cursor: pointer;             top: 0;             left: 0;             right: 0;             bottom: 0;             background-color: #ff00ff;             -webkit-transition: .4s;             transition: .4s;         }
        .slider:before {             position: absolute;             content: "";             height: 26px;             width: 26px;             left: 4px;             bottom: 4px;             background-color: white;             -webkit-transition: .4s;             transition: .4s;         }
        input:checked+.slider {             background-color: #2196F3;         }
        input:focus+.slider {             box-shadow: 0 0 1px #2196F3;         }
        input:checked+.slider:before {             -webkit-transform: translateX(26px);             -ms-transform: translateX(26px);             transform: translateX(26px);         }
        /* Rounded sliders */         .slider.round {             border-radius: 34px;         }
        .slider.round:before {             border-radius: 50%;         }     </style> </head>
<body>     <h2>开关切换</h2>
    <label class="switch">         <input type="checkbox">         <div class="slider"></div>     </label>
    <label class="switch">         <input type="checkbox" checked>         <div class="slider"></div>     </label><br><br>
    <label class="switch">         <input type="checkbox">         <div class="slider round"></div>     </label>
    <label class="switch">         <input type="checkbox" checked>         <div class="slider round"></div>     </label> </body>
</html>

标签:标签,transition,26px,4s,slider,HTML,input
来源: https://www.cnblogs.com/yusilu-2653144/p/15762791.html