Rimuovere il pulsante X “campo chiaro” di IE10 su determinati input?

È una caratteristica utile, certo, ma esiste un modo per disabilitarlo? Ad esempio, se il modulo è un campo di testo singolo e ha già un pulsante “chiaro” accanto, è superfluo avere anche la X. In questa situazione, sarebbe meglio rimuoverlo.

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

Modella lo pseudo-elemento ::-ms-clear per la casella:

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

Ho trovato che è meglio impostare la width e l’ height su 0px . Altrimenti, IE10 ignora il padding definito sul campo – padding-right – che era inteso a impedire al testo di digitare sopra l’icona ‘X’ che ho sovrapposto nel campo di input. Immagino che IE10 applichi internamente il padding-right dell’input allo pseudo elemento ::--ms-clear , e hide lo pseudoelemento non ripristini il valore padding-right del padding-right input .

Questo ha funzionato meglio per me:

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

Applico questa regola a tutti i campi di input di tipo text, quindi non ha bisogno di essere duplicato in seguito:

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

Si può anche diventare meno specifici usando semplicemente:

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

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

Si dovrebbe usare lo stile ::-ms-clear ( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

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

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

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

Penso che valga la pena notare che tutte le soluzioni basate su stile e 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 rimanere bloccato con la visualizzazione di X.

Nel mio caso, sto lavorando con alcuni controlli rilegati di dati di terze parti e la nostra soluzione è stata quella di gestire l’evento “onchange” e cancellare il backing store se il campo è stato cancellato con il pulsante x.