MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

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

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!

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

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