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?

css internet-explorer-10

— Niet the Dark Absol
fonte

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,

1267

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

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

— Ry-
fonte

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;
}

— jimp
fonte

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.

— Wallace Sidhrée
fonte

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;
}

— ducdhm
fonte

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.

— TomXP411
fonte

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;
}

— ClemPat
fonte