知識のポイント
-
inputタグは疑似要素をサポートしていませんが、Chromeでは、入力タイプがチェックボックスまたはラジオの場合、疑似要素を使用できますが、お勧めしません。
-
ラベルラベルと入力ラベルのバインド方法により、ユーザーのクリックエクスペリエンスを向上させることができます。たとえば、ラベルラベルをクリックすると、入力もクリックされます。つまり、ラベル要素のテキストをクリックすると、 、このコントロールがトリガーされます。
-
明示的なバインディング（ラベルのfor属性と入力のid属性が一貫するように定義します）
<label for="switch"> <input type="checkbox" id="switch"> </label> -
暗黙のバインディング
<label> <input /> </label>
-
-
可視性属性：要素が表示されないことを指定しますが、ページ上のスペースも占有します
-
cssセレクター：隣接する兄弟セレクター、記号+を使用
-
擬似クラスセレクター:: checkedは、選択された状態の要素、ラジオ、チェックボックス、選択された要素のオプションタグを示します
エフェクト画像
アイデア
ラベルと入力タグの暗黙的なバインドを使用します。入力タグは疑似要素をサポートしていないため、スパンタグの疑似要素を使用して、白いボールと緑の背景を作成します。入力をクリックすると、移動できます。ボールを水平に動かし、背景色を切り替えます。、可視性を使用して、入力チェックボックスの小さなボックスを非表示にします。
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<label for="switch">
<input type="checkbox" id="switch">
<span></span>
</label>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label{
width: 160px;
height: 80px;
background-color: rgb(235, 232, 232);
border-radius: 40px;
position: relative;
overflow: hidden;
}
label input{
/* 隐藏input的checkbox小框 */
visibility: hidden;
}
/* span的after制作白色小球 */
label span::after{
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
transition: all .6s;
}
/* span的before制作绿色背景 */
label span::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgb(241, 241, 241);
transition: all .6s;
}
/* 相邻兄弟选择器 */
label input:checked + span::after{
background-color: white;
transform: translate(80px);
}
/* 选中背景色变化 */
label input:checked + span::before{
background-color: #339233;
}