Comment masquer l'icône de safari de remplissage automatique dans le champ de saisie
Chacun de mes champs de saisie a la petite icône de personne avec la flèche dans le safari. Comment puis-je désactiver cela? En passant, j'ai une autre page similaire et cela ne se produit pas. J'ai essayé de désactiver tous les styles dans l'inspecteur Web et la page unique contient toujours l'icône. Donc, je ne sais pas si css ou html.
Si vous voulez le cacher complètement, vous pouvez utiliser les astuces css suivantes. Fondamentalement, il détecte ce 'bouton de remplissage automatique de contacts' et l'éloigne du champ de saisie. Assurez-vous que vous avez «position absolue» pour éviter un remplissage supplémentaire de vos champs.
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
Vous n'avez pas à annuler toutes les propriétés des boutons de remplissage automatique.
Pour masquer les icônes de Safari, vous pouvez également masquer son wrapper .
Comme les icônes sont du contenu fantôme, le DOM ne l'affichera pas, mais c'est le cas du DOM ombre. Il suffit d’allumer le bouton '<>' dans l’inspecteur.
Vous y trouverez le conteneur d’emballage que vous pouvez cibler avec css comme ceci:
input::-webkit-textfield-decoration-container {
display: none; /* or whatever styling you want */
}
À l'intérieur, vous trouverez le trousseau de mots de passe et l'indicateur de verrouillage des majuscules:
input::-webkit-caps-lock-indicator {
}
input::-webkit-credentials-auto-fill-button {
}
Oh, et tant que vous y êtes, n'oubliez pas IE avec ses boutons clairs et ses icônes de mots de passe:
input::-ms-clear {
}
input::-ms-reveal {
}
Masquer l'icône Safari de remplissage automatique dans le champ Mot de passe input:
::-webkit-credentials-auto-fill-button {
visibility: hidden;
pointer-events: none;
position: absolute;
right: 0;
}
Connexe: Je voulais ajuster la position de l'icône de la clé pour un input[type="password"] mais je n'ai trouvé le sélecteur de pseudo-élément nulle part.
J'ai donc cloné la source du webkit et j'ai pu la trouver :)
input::-webkit-credentials-auto-fill-button
En guise de remarque, vérifiez également vos étiquettes de champ et toutes les valeurs d'attributs placeholder, car elles peuvent également provoquer l'apparition de fenêtres contextuelles à remplissage automatique, bien que les règles de style CSS soient appliquées au contraire.
Voir ci-dessous pour plus de détails ...
Il convient de noter que, dans Safari (version 11+ au moins, et probablement dans les versions antérieures, ainsi que dans d’autres navigateurs récents, tels que Chrome, Firefox, etc.), même si les différentes solutions de contournement CSS permettant de masquer les popups à complétion automatique sont en place, si le champ semble être un champ de nom d'utilisateur ou de mot de passe pour le navigateur, puis le champ de saisie semi-automatique apparaît toujours.
J'ai constaté que le navigateur ne vérifiait pas seulement l'attribut name de la balise <input> pour des mots clés tels que username, login et des variantes similaires, mais semblait également prendre en compte le contenu de tout attribut placeholder sur le champ, ainsi que le plus surprenant, tout texte adjacent. au champ <input> tel que celui utilisé comme étiquette de champ de formulaire. Le texte de l'étiquette n'a pas besoin d'être placé dans une balise <label> pour avoir cet effet - juste pour être à proximité du champ, bien que je n'aie pas eu l'occasion de tester et de déterminer de manière approfondie ce qui est considéré comme "proximité" - cela requièrent des recherches et des expériences plus poussées ou, si possible, un examen du code source des différents moteurs de rendu de navigateur Web, tel que WebKit.
En tant que tel, si vous avez des mots-clés Word tels que username, user name, login ou des variantes similaires, ainsi que des variantes pour password, le navigateur affichera la fenêtre popup de saisie semi-automatique lorsque le champ est concentré, malgré les règles CSS permettant de le masquer!
Bien que je ne sois pas aussi surpris de voir que le popup était activé par les valeurs d'attribut name ou placeholder de la balise <input>, j'ai été surpris de voir que le texte de l'étiquette était également pris en compte par le navigateur. J'ai donc dû modifier le libellé et l'étiquetage des champs. pour s'assurer que les popups n'apparaissent pas. J'ai trouvé par exemple que modifier le texte de substitution de 'Please enter your username...' à 'Please enter your user-name...' empêchait le navigateur de reconnaître le champ en tant que champ de nom d'utilisateur - remarquez également le trait d'union entre les mots user et name - sans le trait d'union - le popup apparaissait toujours, de sorte qu'il s'affiche. comment Edge peut-il être vérifié par les navigateurs. En guise de remarque, j'avais déjà modifié l'attribut name du champ et l'étiquetage adjacent par cette étape pour supprimer les références aux mots clés déclencheurs ou à leurs variantes.
Il est clair que les navigateurs effectuent des inspections de page intéressantes pour déterminer s’il faut afficher des fenêtres contextuelles de nom d’utilisateur/mot de passe. Bien que ce comportement général soit génial pour encourager les utilisateurs à tirer parti des gestionnaires de mots de passe pour une génération et un stockage plus sûrs des informations d’identité, vous ne voulez pas que le popup auto-complétant apparaisse. Il existe des cas d'utilisation, par exemple au sein d'une interface d'administration, permettant aux administrateurs de gérer des comptes d'utilisateurs du personnel, par exemple, dans lesquels vous souhaitez offrir un champ pour rechercher un utilisateur du personnel par son nom d'utilisateur. Dans de tels cas, vous ne voulez pas que la fenêtre de saisie semi-automatique tente de remplir le champ avec votre propre nom d'utilisateur, mais vous permet plutôt de saisir un nombre illimité de noms d'utilisateur d'employés, par exemple. Il serait bon que les éditeurs de navigateurs adoptent l'un des drapeaux autocomplete='off' standard ou une variante future pour fournir ce contrôle précis du comportement de saisie semi-automatique ou un attribut CSS standard qui, s'il était appliqué, avait toujours l'effet escompté ... mais hélas, cela n'est pas le cas actuellement.
Pour l'instant cependant, si vous avez affaire à ce problème, assurez-vous de prendre également en compte le contenu de tout attribut placeholder que vous avez ajouté à tous les champs de nom d'utilisateur ou de mot de passe <input> - ainsi que tout texte ressemblant à une étiquette qui apparaît à proximité. En ajustant et en expérimentant les valeurs de ces étiquettes/attributs, vous devriez être en mesure de contourner la logique d'inspection de page utilisée par les navigateurs pour activer ces popups à complétion automatique.
Comme toujours avec le Web, et comme certains moteurs de rendu de navigateur sont à source fermée, cela restera probablement plus un art qu'une science, jusqu'à ce qu'une norme soit développée pour permettre le contrôle de cette fonctionnalité par tous les navigateurs sur toutes les plateformes. et il peut être nécessaire de revoir le code à l'occasion pour le comparer aux nouvelles versions du navigateur afin de vous assurer que les fenêtres contextuelles ne réapparaissent pas en raison de la modification de la logique d'inspection des pages.