Gerador de Toggle Switch HTML

Voce precisa de um interruptor tipo liga-desliga numa tela de configuracoes e nao quer puxar um framework de CSS inteiro so por causa disso. O checkbox padrao do HTML funciona bem, teclado e leitor de tela ja entendem, ele so nao tem a cara de interruptor. O caminho sensato e partir do checkbox de verdade e trocar a aparencia, que e exatamente o que sai daqui.

Voce digita o texto do rotulo e escreve sim ou nao para o estado inicial, e a saida e um label em inline-flex com o input dentro e o texto ao lado. O input vem com appearance:none, 36 por 20 pixels, fundo cinza e cantos arredondados. Vale ser claro sobre o limite: nao ha regra para o estado marcado nem para a bolinha deslizante, entao a pilha aparece cinza igual nos dois estados. O que voce recebe e a base, o visual voce completa.

Para virar interruptor de fato, leve o codigo para uma folha de estilo e acrescente duas regras: uma para input:checked mudando o fundo, e um pseudo-elemento ::after com o circulo que desliza via transform. Pseudo-elemento nao cabe em atributo style inline, por isso ele nao esta na saida. Mantenha o label envolvendo o input, que e o que da clique no texto e nome acessivel. O rotulo nao e escapado: se tiver aspas ou sinal de menor, ajuste antes de colar. Tudo e montado no navegador.