Supprimer le bouton X «clear field» d'IE10 sur certaines entrées?

742

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 a déjà un bouton "effacer" à côté, il est superflu d'avoir également le X. Dans cette situation, il serait préférable de le supprimer.

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

css internet-explorer-10 Niet l'Absolu Noir
la source
1
Ceci est également utile sur un champ avec une valeur par défaut où le blanc n'a pas de sens, par exemple la quantité.
Joe Flynn
4
car cela ne déclenche pas de saisie, cela est très délicat lorsque vous liez un événement javascript.
Kiwy

Réponses:

1267

Stylisez le ::-ms-clearpseudo-élément de la boîte:

.someinput::-ms-clear {
    display: none;
}
Ry-
la source
14
C'est drôle si vous utilisez le mode de compatibilité IE pour rendre votre page avec des moteurs avant IE10, ce pseudo-élément ne fonctionne pas et il montre quand même le bouton.
Yousef Salimpour
@Yousef: Oui, c'est ainsi que cela fonctionne et c'est pourquoi vous ne devriez jamais utiliser le mode de compatibilité sur un site Web réel. Ce n'est pas réellement compatible :)
Ry-
@minitech - Son IE9 sur une machine Windows 7
ManJan
3
Ce contrôle apparaît UNIQUEMENT dans IE10 + sur Win8. L'astuce est qu'elle apparaît toujours lorsque le document est mis en mode de compatibilité.
EricLaw
48
@EricLaw: Eh bien, PAS SEULEMENT sur Win8. J'utilise Windows 7 en ce moment et je peux voir ces boutons X dans mon IE10. Donc, vous pourriez dire que c'est une fonctionnalité uniquement IE10 + (pas sûr d'IE9, cependant), mais certainement PAS uniquement Win8, car cela apparaît dans la version Win7 d'IE10. Quoi qu'il en soit, merci pour l'astuce, @minitech!
OMA
272

J'ai trouvé qu'il valait mieux régler le widthet heightle 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 le padding-rightde l'entrée au ::--ms-clearpseudo-élément, et masquer le pseudo-élément ne restaure pas la padding-rightvaleur du input.

Cela a mieux fonctionné pour moi:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}
jimp
la source
3
Voici un jsFiddle illustrant cette solution: jsfiddle.net/zoldello/S5YRj
Phil
106

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

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

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

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

J'ai utilisé la dernière avant même d'ajouter cette réponse, mais j'ai pensé que la plupart des gens préféreraient être plus précis que cela. Les deux solutions fonctionnent bien.

Wallace Sidhrée
la source
Merci, ça a marché pour moi.
Sooraj Jose
76

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

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

Et vous créez également un ::-ms-revealpseudo-élément pour le champ de mot de passe:

::-ms-reveal {
   display: none;
}
ducdhm
la source
6
Remarque - réfléchissez si vous pouvez faire fonctionner l' ::-ms-revealélément avant de le retirer! (Ou si vous offrez ce bouton à tout le monde, comme le demandeur d'origine.) Certains l'utilisent vraiment.
Ry-
3
@minitech - ça sonne bien. Pouvez-vous nous dire comment le faire fonctionner avec la liaison Javascript sur les événements d'entrée? Il ne déclenche pas d'événement, il est donc presque impossible de travailler avec.
DarrellNorton
11

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

Si votre page doit s'exécuter en mode de compatibilité, vous pouvez être bloqué avec l'affichage X.

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

TomXP411
la source
0

Pour masquer les flèches et croiser dans une entrée "heure":

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}
ClemPat
la source