Personalizar o botão de mostrar senha

O password tipo de entrada no Microsoft Edge inclui um botão revelar senha . Para garantir que a senha foi inserida corretamente, um usuário pode clicar no botão revelar senha ou pressionar Alt+F8 para mostrar os caracteres no campo de senha. Você pode remover o controle de revelação de senha ou personalizar o estilo do controle.

Por padrão, o botão revelar senha está desativado, de modo que, no campo de senha , os pontos substituam os caracteres inseridos pelo usuário. O botão revelar senha aparece à direita do campo de senha , como um ícone em forma de olho:

Quando o usuário clica no botão revelar senha para ativá-lo, o texto da senha é revelado e o ícone do olho muda para ter uma barra sobre ele:

Por padrão, o botão revelar senha é inserido no Shadow DOM de todos os elementos HTML input definidos type como "password". A partir da versão 87 do Microsoft Edge, os usuários ou empresas podem desabilitar esse recurso globalmente. Os desenvolvedores e designers da Web devem esperar que a maioria dos usuários do Microsoft Edge tenha a experiência padrão.

Remover o controle de revelação de senha

Como autor da página da Web, você pode remover completamente o botão revelar senha , direcionando o ::-ms-reveal pseudo-elemento:

::-ms-reveal {
    display: none;
}

No entanto, você deve considerar aproveitar o botão revelar senha . O botão revelar senha nativa tem medidas de segurança importantes incorporadas ao comportamento.

Personalizar o estilo de controle

Em vez de remover totalmente o controle, você pode modificar o estilo do botão revelar senha para corresponder melhor ao idioma visual do site. O trecho a seguir fornece um exemplo desse estilo:

::-ms-reveal {
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 3px currentColor;
}

Lembre-se do seguinte ao definir o estilo do botão revelar senha :

• O ícone de olho é implementado como uma imagem de fundo. Para adicionar uma cor de fundo ao botão revelar senha , use a propriedade CSS background-color em vez da background propriedade abreviada.

• Você pode ajustar o tamanho e a escala do botão revelar senha .

  Observação

  O navegador oculta qualquer estouro fora dos limites do controle de entrada de senha.

• Atualmente, nenhum seletor de estado está disponível para estilizar o estado alternado do botão revelar senha .

Visibilidade do controle

O botão revelar senha fica indisponível até que o usuário insira texto no campo de senha . Para ajudar a manter segura a entrada da senha do usuário, o navegador suprime o botão nos seguintes cenários:

• Se o foco se afastar do campo de senha , o navegador removerá o botão revelar senha .

• Se os scripts modificarem o campo de senha , o navegador removerá o botão revelar senha .

Se o botão revelar senha for removido, o usuário deverá excluir o conteúdo do campo de senha para que o botão revelar senha apareça novamente. Esse comportamento impede que alguém faça um pequeno ajuste para exibir a senha, caso o usuário saia de um dispositivo desbloqueado.

O botão revelar senha não estará disponível se o campo de senha for preenchido automaticamente usando o gerenciador de senhas.