Image illustrant Supprimer les icônes d'action dans les champs avec Internet Explorer 10

Supprimer les icônes d’action dans les champs avec Internet Explorer 10

Depuis la sortie d’Internet Explorer 10 (compatible Windows 7 et plus), Microsoft ne cesse d’innover et de proposer des solutions intéressantes à des problèmes courants. Le dernier en date : la gestion des champs texte par son navigateur et l’affichage de petites icônes d’action pour vider le champ et afficher le mot de passe en clair. Pratique pour vos utilisateurs mais un peu invasif pour votre design, voici comment les supprimer grâce à CSS.

Supprimer l’action « effacer »

Pour eviter d’afficher la petite croix qui efface le texte :

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

Supprimer l’action « révéler le mot de passe »

Pour empêcher l’utilisateur de voir son mot de passe en clair :

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

Et sous Webkit alors ?

Pour Safari, Chrome, Opera et les autres navigateurs basés sur Webkit, cette fonctionnalité n’est implémentée que dans les champs de type="search" mais ça n’empêche qu’on peut le désactiver.

::-webkit-search-cancel-button {  
        -webkit-appearance: none;
   }  

Gardez en tête le bien-être de vos utilisateurs

Si vous vous retrouvez dans l’obligation de désactiver ces fonctionnalités, pensez aux utilisateurs qui y sont habitués et fournissez un moyen alternatif (et mieux intégré dans votre design) pour effectuer ces actions.

Mais une chose est sûre : affichez les mots de passe en clair.