Por que esta ferramenta é útil
Estilize uma preferência de ligar/desligar como um interruptor familiar, mantendo uma caixa de seleção real para formulários, leitores de tela e interação por teclado.
Design e CSS · é executado localmente
Gerador de Interruptor de Alternância CSS Acessível
Gere um interruptor alternativo responsivo baseado em caixa de seleção, com geometria coerente da pista e do botão deslizante, cores ativas e um tratamento de foco visível via teclado.
Pronto. Os seus dados de trabalho permanecem neste navegador.
Como funciona o sistema
As dimensões do trilho e do polegar são validadas em conjunto, o deslocamento do polegar é calculado a partir da diferença entre elas e a amostra ao vivo permanece dentro da guia atual do navegador.
Exemplo prático
Crie um interruptor de notificação de 56 por 30 pixels cujo estado ativado verde mova o polegar de 24 pixels exatamente 26 pixels ao longo da trilha.
Validação
O cálculo é determinístico e explica os erros de validação em vez de alterar silenciosamente a entrada inválida.
Limite de privacidade
A entrada e a saída permanecem nesta aba. Copiar e baixar acontecem por meio das APIs do navegador, sem envio ao servidor.
Passaporte de resultado
Cada execução registra o modo da ferramenta, o carimbo de data e hora e o tamanho de entrada/saída para que os dados transformados possam ser auditados.