Rimuovere il pulsante X "cancella campo" di IE10 su determinati ingressi?


742

È una funzionalità utile, certo, ma c'è un modo per disabilitarlo?
Ad esempio, se il modulo è un singolo campo di testo e ha già un pulsante "cancella" accanto, è superfluo avere anche la X. In questa situazione, sarebbe meglio rimuoverlo.

Può essere fatto, e se sì, come?


1
Ciò è utile anche su un campo con un valore predefinito in cui lo spazio vuoto non ha senso, ad es. Quantità.
Joe Flynn,

4
poiché questo non attiva una digitazione di input, questo è molto complicato quando si associa un evento javascript.
Kiwy,

Risposte:


1267

Stile lo ::-ms-clearpseudo-elemento per la scatola:

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

14
È divertente se usi la modalità di compatibilità IE per rendere la tua pagina con i motori precedenti a IE10, questo pseudo elemento non funziona e mostra comunque il pulsante.
Yousef Salimpour l'

@Yousef: Sì, è così che funziona e parte del motivo per cui non dovresti mai utilizzare la modalità di compatibilità in un sito Web reale. In realtà non è compatibile :)
Ry-

@minitech - IE9 su Windows 7
ManJan

3
Questo controllo appare SOLO in IE10 + su Win8. Il trucco è che appare ancora quando il documento viene messo in una modalità di compatibilità.
EricLaw,

48
@EricLaw: Beh, NON SOLO su Win8. Sto usando Windows 7 in questo momento e posso vedere quei pulsanti X nel mio IE10. Quindi potresti dire che è una funzionalità IE10 + (non sono sicuro di IE9, però), ma sicuramente NON solo Win8, poiché questo appare nella versione Win7 di IE10. Comunque, grazie per la punta, @minitech!
OMA,

272

Ho trovato è meglio impostare la widthe heightal 0px. Altrimenti, IE10 ignora il padding definito nel campo - padding-right- che intendeva impedire al testo di digitare sopra l'icona "X" che ho sovrapposto sul campo di input. Suppongo che IE10 stia applicando internamente padding-rightl'input allo ::--ms-clearpseudo elemento e nascondere lo pseudo elemento non ripristina il padding-rightvalore a input.

Questo ha funzionato meglio per me:

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

3
Ecco un jsFiddle che illustra questa soluzione alternativa: jsfiddle.net/zoldello/S5YRj
Phil

106

Vorrei applicare questa regola a tutti i campi di input di tipo testo, quindi non è necessario duplicarli in seguito:

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

Si può anche diventare meno specifici usando solo:

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

Ho usato la versione successiva anche prima di aggiungere questa risposta, ma ho pensato che la maggior parte delle persone preferirebbe essere più specifica di così. Entrambe le soluzioni funzionano bene.


Grazie, ha funzionato per me.
Sooraj Jose,

76

È necessario eseguire lo stile per ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

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

E anche lo stile per ::-ms-revealpseudo-elemento per il campo password:

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

6
Nota: pensa a se puoi far funzionare l' ::-ms-revealelemento prima di rimuoverlo! (O se stai fornendo questo pulsante a tutti, come il richiedente originale.) Alcuni lo usano davvero.
Ry-

3
@minitech - sembra fantastico. Puoi dirci come farlo funzionare con l'associazione Javascript sugli eventi di input? Non genera un evento, quindi è quasi impossibile collaborare.
DarrellNorton,

11

Penso che valga la pena notare che tutto lo stile e le soluzioni basate su CSS non funzionano quando una pagina è in esecuzione in modalità compatibilità. Il renderer della modalità di compatibilità ignora l'elemento :: - ms-clear, anche se il browser mostra la x.

Se la tua pagina deve essere eseguita in modalità compatibilità, potresti essere bloccato con la X visualizzata.

Nel mio caso, sto lavorando con alcuni controlli associati a dati di terze parti e la nostra soluzione era gestire l'evento "onchange" e cancellare l'archivio di backup se il campo è stato cancellato con il pulsante x.


0

Per nascondere le frecce e incrociarle in un input "time":

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.