css - query - ¿Desea eliminar el botón X del "campo limpio" de IE10 en ciertas entradas?

internet explorer no respeta css

Question

Es una característica útil, sin duda, pero ¿hay alguna forma de desactivarla? Por ejemplo, si el formulario es un solo campo de texto 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?

Answer 1

Creo que vale la pena señalar que todo el estilo y las soluciones basadas en 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, es posible que se quede bloqueado con la X que se muestra.

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

Answer 2

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

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

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

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

Answer 3

Encontré que es mejor establecer el width y la height a 0px . De lo contrario, IE10 ignora el relleno definido en el campo, padding-right , que tenía la intención de evitar que el texto se escribiera sobre el ícono "X" que superponía en el campo de entrada. Supongo que IE10 está aplicando internamente el padding-right de padding-right de la entrada al pseudo elemento ::--ms-clear , y al ocultar el elemento de pseudo no se restaura el valor del padding-right en la input .

Esto funcionó mejor para mí:

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

Answer 4

Yo aplicaría esta regla a todos los campos de entrada de texto de tipo, 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 usando solo:

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

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

Answer 5

Estilo del ::-ms-clear pseudo-elemento ::-ms-clear para el cuadro:

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