Question Retirer le bouton X "clear field" de IE10 sur certaines entrées?


C'est une fonctionnalité utile, bien sûr, mais est-il possible de le désactiver? Par exemple, si le formulaire est un seul champ de texte et qu'il a déjà un bouton "effacer" à côté, il est superflu d'avoir aussi le X. Dans ce cas, il serait préférable de le supprimer.

Peut-il être fait, et si oui, comment?


654
2017-12-23 00:07


origine


Réponses:


Style le ::-ms-clear pseudo-élément pour la boîte:

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

1099
2017-12-23 00:50



J'ai trouvé qu'il valait mieux mettre le width et height à 0px. Sinon, IE10 ignore le remplissage défini sur le champ - padding-right - qui était destiné à empêcher le texte de taper sur l'icône «X» que j'ai superposée sur le champ de saisie. Je suppose que IE10 applique en interne la padding-right de la contribution à la ::--ms-clear pseudo élément, et en cachant le pseudo élément ne restaure pas le padding-right valeur à la input.

Cela a mieux fonctionné pour moi:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}

249
2018-02-06 21:25



J'appliquerais cette règle à tous les champs d'entrée de texte de type, il n'a donc pas besoin d'être dupliqué plus tard:

input[type=text]::-ms-clear { display: none; }

On peut même devenir moins spécifique en utilisant juste:

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

J'ai utilisé ce dernier même avant d'ajouter cette réponse, mais je pensais que la plupart des gens préféreraient être plus précis que cela. Les deux solutions fonctionnent bien.


79
2017-08-16 10:00



Tu devrais coiffer ::-ms-clear (http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx):

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

Et vous aussi style pour ::-ms-reveal pseudo-élément pour le champ mot de passe:

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

66
2018-02-19 01:54



Je pense qu'il vaut la peine de noter que toutes les solutions basées sur le style et CSS ne fonctionnent pas lorsqu'une page fonctionne en mode de compatibilité. Le rendu de mode de compatibilité ignore l'élément :: - ms-clear, même si le navigateur affiche le x.

Si votre page doit fonctionner en mode de compatibilité, vous risquez d'être bloqué avec l'affichage X.

Dans mon cas, je travaille avec des contrôles liés aux données tiers, et notre solution consistait à gérer l'événement "onchange" et à effacer le magasin de sauvegarde si le champ est effacé avec le bouton x.


9
2017-08-02 16:40