Pregunta ¿Quitar el botón X de "campo claro" de IE10 en ciertas entradas?


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 tener también la X. En esta situación, sería mejor eliminarlo.

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


654
2017-12-23 00:07


origen


Respuestas:


Estilo el ::-ms-clear pseudo-elemento para la caja:

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

1099
2017-12-23 00:50



Descubrí que es mejor configurar el width y height a 0px. De lo contrario, IE10 ignora el relleno definido en el campo - padding-right - que estaba destinado a evitar que el texto teclee sobre el icono 'X' que superpuse en el campo de entrada. Supongo que IE10 está aplicando internamente padding-right de la entrada a la ::--ms-clear pseudo elemento, y ocultar el pseudo elemento no restaura la padding-right valor para el input.

Esto funcionó mejor para mí:

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

249
2018-02-06 21:25



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

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

Uno puede incluso ser menos específico al usar simplemente:

::-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.


79
2017-08-16 10:00



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

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

Y también estilo para ::-ms-reveal pseudo-elemento para el campo de contraseña:

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

66
2018-02-19 01:54



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 renderizador del 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 que se quede con la X que muestra.

En mi caso, estoy trabajando con algunos controles de datos de terceros, y nuestra solución fue manejar el evento "onchange" y limpiar la tienda de respaldo si el campo se borra con el botón x.


9
2017-08-02 16:40