web-dev-qa-db-fra.com

Supprimer le bouton X "Effacer le champ" d'IE10 sur certaines entrées?

C'est une fonctionnalité utile, bien sûr, mais existe-t-il un moyen de la désactiver? Par exemple, si le formulaire est un champ de texte unique et qu’il comporte déjà un bouton "effacer", il est superflu d’avoir également le X. Dans ce cas, il serait préférable de le supprimer.

Peut-on le faire, et si oui, comment?

cssinternet-explorer-10
714
Niet the Dark Absol

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

_.someinput::-ms-clear {
    display: none;
}
_
1203
Ry-

J'ai trouvé qu'il était préférable de régler les paramètres width et height sur 0px. Sinon, IE10 ignore le remplissage défini dans le champ - padding-right - destiné à empêcher le texte de taper par-dessus l'icône "X" superposée dans le champ de saisie. Je suppose que IE10 applique en interne le padding-right de l'entrée au pseudo-élément ::--ms-clear et masquer le pseudo-élément ne restaure pas la valeur padding-right dans le input .

Cela a mieux fonctionné pour moi:

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

J'appliquerais cette règle à tous les champs de saisie de type text, il ne sera donc pas nécessaire de la dupliquer ultérieurement:

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

On peut même être moins précis en utilisant simplement:

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

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

98
Wallace Sidhrée

Vous devez styler pour ::-ms-clear ( http://msdn.Microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

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

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

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

Je pense qu'il convient de noter que toutes les solutions de style et de CSS ne fonctionnent pas lorsqu'une page est exécutée en mode de compatibilité. Le rendu en 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é, il est possible que vous soyez bloqué avec l'affichage de 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 à vider le magasin de support si le champ est effacé avec le bouton x.

10
TomXP411