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