¿Eliminar el botón X "borrar campo" de IE10 en ciertas entradas?

742

Es una característica útil, sin duda, pero ¿hay alguna forma de desactivarla?
Por ejemplo, si el formulario es un campo de texto único y ya tiene un botón "borrar" al lado, es superfluo también tener la X. En esta situación, sería mejor eliminarlo.

¿Se puede hacer, y si es así, cómo?

css internet-explorer-10 Niet the Dark Absol
fuente
1
Esto también es útil en un campo con un valor predeterminado donde el blanco no tiene sentido, por ejemplo, la cantidad.
Joe Flynn
44
Como esto no desencadena un tipeo de entrada, esto es muy complicado cuando se vincula el evento javascript.
Kiwy

Respuestas:

1267

Estilo del ::-ms-clearpseudo-elemento para el cuadro:

.someinput::-ms-clear {
    display: none;
}
Ry-
fuente
14
Es divertido si usa el modo de compatibilidad de IE para representar su página con motores anteriores a IE10, este pseudo elemento no funciona y muestra el botón de todos modos.
Yousef Salimpour
@Yousef: Sí, así es como funciona y es parte de por qué nunca debes usar el Modo de compatibilidad en un sitio web real. En realidad no es compatible :)
Ry-
@minitech - Es IE9 en la máquina con Windows 7
ManJan
3
Este control SOLO aparece en IE10 + en Win8. El truco es que todavía aparece cuando el documento se pone en modo de compatibilidad.
EricLaw
48
@EricLaw: Bueno, NO SOLO en Win8. Estoy usando Windows 7 en este momento y puedo ver esos botones X en mi IE10. Entonces, podría decir que es una característica única de IE10 + (aunque no estoy seguro acerca de IE9), pero definitivamente NO es solo Win8, ya que esto aparece en la versión Win7 de IE10. De todos modos, gracias por el consejo, @minitech!
OMA
272

Descubrí que es mejor configurar el widthy heightpara 0px. De lo contrario, IE10 ignora el relleno definido en el campo, padding-rightque tenía la intención de evitar que el texto escribiera sobre el icono 'X' que superpuse en el campo de entrada. Supongo que IE10 está aplicando internamente padding-rightla entrada al ::--ms-clearpseudo elemento, y ocultar el pseudo elemento no restaura el padding-rightvalor en el input.

Esto funcionó mejor para mí:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}
pobre
fuente
3
Aquí hay un jsFiddle que ilustra esta solución: jsfiddle.net/zoldello/S5YRj
Phil
106

Aplicaría esta regla a todos los campos de entrada de texto de tipo, por lo que no es necesario duplicarla más tarde:

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

Incluso se puede ser menos específico usando solo:

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

He usado el último incluso antes de agregar esta respuesta, pero pensé que la mayoría de las personas preferiría ser más específico que eso. Ambas soluciones funcionan bien.

Wallace Sidhrée
fuente
Gracias, funcionó para mí.
Sooraj Jose
76

Debe diseñar para ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ):

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

Y también puede diseñar el ::-ms-revealpseudo-elemento para el campo de contraseña:

::-ms-reveal {
   display: none;
}
ducdhm
fuente
66
Nota: ¡piense si puede hacer que el ::-ms-revealelemento funcione antes de eliminarlo! (O si proporciona este botón para todos, como el autor de la pregunta original). Algunos realmente lo usan.
Ry-
3
@minitech: eso suena genial. ¿Puede decirnos cómo hacer que funcione con el enlace de Javascript en los eventos de entrada? No genera un evento, por lo que es casi imposible trabajar con él.
DarrellNorton
11

Creo que vale la pena señalar que todas las soluciones basadas en estilo y CSS no funcionan cuando una página se ejecuta en modo de compatibilidad. El procesador de modo de compatibilidad ignora el elemento :: - ms-clear, aunque el navegador muestre la x.

Si su página necesita ejecutarse en modo de compatibilidad, puede estar atascado con la X que se muestra.

En mi caso, estoy trabajando con algunos controles vinculados a datos de terceros, y nuestra solución fue manejar el evento "onchange" y borrar el almacén de respaldo si el campo se borra con el botón x.

TomXP411
fuente
0

Para ocultar flechas y cruzar en una entrada de "tiempo":

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