--- title: '::-ms-clear' slug: 'Web/CSS/::-ms-clear' tags: - CSS - No estándar(2) - Pseudo-elemento - Referencia translation_of: 'Archive/Web/CSS/::-ms-clear' ---

{{non-standard_header}}{{CSSRef}}

Resumen

El pseudo-elemento CSS  ::-ms-clear sirve para representar un botón (el botón "borrar") en el borde de un elemento  {{HTMLElement("input")}} con type="text". Este botón elimina el valor actual del elemento {{HTMLElement("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  {{HTMLElement("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" */
}

{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/::-ms-clear') }}

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

{{CompatibilityTable}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico {{CompatNo}} {{CompatNo}} 10.0 [1]
Edge 12+		 {{CompatNo}} {{CompatNo}}
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}}

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