Personalizar o botão de revelação da palavra-passe

O password tipo de entrada no Microsoft Edge inclui um botão de revelação de palavra-passe . Para se certificar de que a palavra-passe foi introduzida corretamente, um utilizador pode clicar no botão revelar palavra-passe ou premir Alt+F8 para mostrar os carateres no campo de palavra-passe. Pode remover o controlo de revelação de palavra-passe ou personalizar o estilo de controlo.

Por predefinição, o botão revelar palavra-passe está desativado, para que, no campo palavra-passe , os pontos substituam os carateres introduzidos pelo utilizador. O botão revelar palavra-passe aparece à direita do campo de palavra-passe , como um ícone em forma de olho:

Quando o utilizador clica no botão revelar palavra-passe para o ativar, o texto da palavra-passe é revelado e o ícone de olho muda para ter uma barra sobre a mesma:

Por predefinição, o botão de revelação de palavra-passe é inserido no DOM sombra de todos os elementos HTML input que tenham definido type como "password". A partir da Versão 87 do Microsoft Edge, os utilizadores ou empresas podem desativar esta funcionalidade globalmente. Os web designers e programadores devem esperar que a maioria dos utilizadores do Microsoft Edge tenha a experiência predefinida.

Remover o controlo de revelação da palavra-passe

Enquanto autor da página Web, pode remover completamente o botão de revelação da palavra-passe ao direcionar o ::-ms-reveal pseudo-elemento:

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

No entanto, deve considerar tirar partido do botão de revelação da palavra-passe . O botão de revelação da palavra-passe nativa tem medidas de segurança importantes incorporadas no comportamento.

Personalizar o estilo de controlo

Em vez de remover totalmente o controlo, pode modificar o estilo do botão de revelação da palavra-passe para corresponder melhor à linguagem visual do site. O fragmento seguinte fornece um exemplo de tal estilo:

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

Tenha em atenção os seguintes aspetos quando modelar o botão de revelação da palavra-passe :

• O ícone de olho é implementado como uma imagem de fundo. Para adicionar uma cor de fundo ao botão de revelação da palavra-passe , utilize a propriedade CSS background-color em vez da background propriedade abreviada.

• Pode ajustar o tamanho e a escala do botão de revelação da palavra-passe .

  Observação

  O browser oculta qualquer capacidade excedida fora dos limites do controlo de entrada de palavra-passe.

• Atualmente, não estão disponíveis seletores de estado para alterar o estado do botão de revelação da palavra-passe .

Visibilidade do controlo

O botão de revelação da palavra-passe não está disponível até que o utilizador introduza texto no campo da palavra-passe . Para ajudar a manter a entrada de palavra-passe do utilizador segura, o browser suprime o botão nos seguintes cenários:

• Se o foco se afastar do campo de palavra-passe , o browser remove o botão de revelação da palavra-passe .

• Se os scripts modificarem o campo de palavra-passe , o browser remove o botão de revelação da palavra-passe .

Se o botão de revelação da palavra-passe for removido, o utilizador tem de eliminar o conteúdo do campo de palavra-passe para que o botão de revelação da palavra-passe apareça novamente. Este comportamento impede que alguém faça um pequeno ajuste para apresentar a palavra-passe, caso o utilizador se afaste de um dispositivo desbloqueado.

O botão de revelação da palavra-passe não está disponível se o campo de palavra-passe for preenchido automaticamente com o gestor de palavras-passe.