::-ms-clear

No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Resumen

El pseudo-elemento CSS  ::-ms-clear sirve para representar un botón (el botón "borrar") en el borde de un elemento  <input> con type="text". Este botón elimina el valor actual del elemento <input>. El botón y pseudo-elemento no son parte del estándar y únicamente son soportados por los navegadores Internet Explorer 10 y 11 y Edge 12+, de ahí el prefijo del vendedor  (`-ms` por Microsoft). El botón de borrado sólo se muestra en elementos  <input> con type="text" que hayan recibido el foco y no estén vacíos.

Síntaxis

 selector::-ms-clear

Ejemplos

Contenido HTML

<form>
   <label for="firstname">First name:</label>
   <input type="text" id="firstname" name="firstname" placeholder="First name"><br>

   <label for="lastname">Last name:</label>
   <input type="text" id="lastname" name="lastname" placeholder="Second name">
</form>

Contenido CSS

input,
label {
    display: block;
}

input[type=text]::-ms-clear {
    color: red; /* Establece el color de la cruz a rojo */
    /* La cruz se puede ocultar si fijamos el atributo display a "none" */
}

El siguiente pantallazo muestra, para aquellos que no tengan acceso a IE 10/11 o a  Edge 12+, cómo quedaría esta característica:

 

Especificaciones

No es parte de ninguna especificación

Microsoft tiene una descripción en MSDN que enumera las distintas propiedades que podemos establecer para este tipo de pseudo-elementos.

Esta característica sólo está disponible para IE 10-11, ha sido eliminada en la versión más reciente de Microsoft Edge.

Compatibilidad con los distintos navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico No support No support 10.0 [1]
Edge 12+
No support No support
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico No support No support ? No support No support

[1] En un <input> de texto al que se le haya dada estilo con  text-align: right,  si se muestra el botón de borrado,  éste cortará el borde derecho del valor contenido en el <input>. Una solución es esconder el botón usando  display: none.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,