::-ms-clear

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.

Compatibilidad con los distintos navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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