diff options
Diffstat (limited to 'files/es/web/css/_doublecolon_-ms-clear/index.html')
| -rw-r--r-- | files/es/web/css/_doublecolon_-ms-clear/index.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/files/es/web/css/_doublecolon_-ms-clear/index.html b/files/es/web/css/_doublecolon_-ms-clear/index.html new file mode 100644 index 0000000000..d5fe9d7ffa --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-clear/index.html @@ -0,0 +1,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"><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> +</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> |