Pontos de conhecimento
-
A tag de entrada não oferece suporte a pseudoelementos , mas no Chrome, quando o tipo de entrada é caixa de seleção ou rádio, pseudoelementos podem ser usados, mas não é recomendado.
-
O método de vinculação do rótulo do rótulo e do rótulo de entrada pode melhorar a experiência de clique do usuário. Por exemplo, se você clicar no rótulo do rótulo, a entrada também será clicada. Ou seja, se você clicar no texto no elemento de rótulo , este controle será acionado.
-
Ligação explícita (defina o atributo for do rótulo e o atributo id da entrada para ser consistente)
<label for="switch"> <input type="checkbox" id="switch"> </label> -
Ligação implícita
<label> <input /> </label>
-
-
atributo de visibilidade: especifica que o elemento não é visível, mas também ocupará espaço na página
-
seletor css: seletor irmão adjacente, use o símbolo +
-
Seletor de pseudoclasse:: marcado indica o elemento no estado selecionado, rádio, caixa de seleção, tag de opção no elemento selecionado
Imagem de efeito
Ideias
Use a vinculação implícita de rótulo e tag de entrada. Como a tag de entrada não suporta pseudoelementos, use os pseudoelementos da tag span para fazer uma bola branca e um fundo verde. Ao clicar na entrada, você pode mover a bola horizontalmente e mudar a cor de fundo. Use a visibilidade para ocultar a pequena caixa da caixa de seleção de entrada.
Código
<!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;
}