files/es/web/css/_doublecolon_-ms-clear/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

---
title: '::-ms-clear'
slug: 'Web/CSS/::-ms-clear'
tags:
  - CSS
  - No estándar(2)
  - Pseudo-elemento
  - Referencia
translation_of: 'Archive/Web/CSS/::-ms-clear'
---
<p id="comment_text_9">{{non-standard_header}}{{CSSRef}}</p>

<h2 id="MSCLEARLS" name="MSCLEARLS">Resumen</h2>

<p id="MSCLEARLS">El <a href="/es/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a>CSS  <strong><code>::-ms-clear</code></strong> 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.</p>

<h2 id="Síntaxis"><strong>Síntaxis</strong></h2>

<pre class="syntaxbox"> <em>selector</em>::-ms-clear</pre>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<h4 id="Contenido_HTML">Contenido HTML</h4>

<pre class="brush: html">&lt;form&gt;
   &lt;label for="firstname"&gt;First name:&lt;/label&gt;
   &lt;input type="text" id="firstname" name="firstname" placeholder="First name"&gt;&lt;br&gt;

   &lt;label for="lastname"&gt;Last name:&lt;/label&gt;
   &lt;input type="text" id="lastname" name="lastname" placeholder="Second name"&gt;
&lt;/form&gt;
</pre>

<h4 id="Contenido_CSS">Contenido CSS</h4>

<pre class="brush: css">input,
label {
    display: block;
}

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

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

<p>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:</p>

<p> <img alt="" src="https://mdn.mozillademos.org/files/12263/ms-clear-example.png" style="display: block; height: 75px; margin: 0px auto; width: 611px;"></p>

<h2 id="Especificaciones">Especificaciones</h2>

<p>No es parte de ninguna especificación</p>

<p>Microsoft <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx">tiene una descripción en MSDN</a> que enumera las distintas propiedades que podemos establecer para este tipo de pseudo-elementos.</p>

<div class="note">
<p id="comment_text_9">Esta característica sólo está disponible para IE 10-11, ha sido eliminada en la versión más reciente de Microsoft Edge.</p>
</div>

<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>10.0 [1]<br>
    Edge 12+</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p><span style="line-height: 1.5;">[1] En un {{HTMLElement("input")}} de texto al que se le haya dada estilo con  {{cssxref("text-align")}}</span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">: right</code><span style="line-height: 1.5;">,  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")}}</span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">: none</code><span style="line-height: 1.5;">.</span></p>