blob: efe8d9c509df80ac4a93f45b034c660c8a2369a2 (
plain)
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
|
---
title: '::-moz-placeholder'
slug: 'Web/CSS/::-moz-placeholder'
tags:
- CSS
- No estándar(2)
- Pseudo-elemento CSS
- Referencia CSS
translation_of: 'Web/CSS/::placeholder'
---
<div>{{Non-standard_header}}{{CSSRef}}</div>
<div class="note"><strong>Nota:</strong> El pseudo-elemento <code>::-moz-placeholder</code> fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.</div>
<h2 id="Resumen">Resumen</h2>
<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>::-moz-placeholder</code> sirve para seleccionar cualquier elemento de un formulario que esté mostrando un <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text) </a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).</p>
<h2 id="Ejemplo">Ejemplo</h2>
<p>En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).</p>
<h3 id="Contenido_HTML">Contenido HTML</h3>
<pre class="brush:html"><input id="test" placeholder="Placeholder text!">
</pre>
<h3 id="Contenido_CSS">Contenido CSS</h3>
<pre class="brush:css">input::-moz-placeholder {
color: green;
}
</pre>
<p>Obtendremos el siguiente resultado:</p>
<p>{{EmbedLiveSample("Example")}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<p>No es parte de ninguna especificación.</p>
<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 (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</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>Firefox OS</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Firefox aplica un estilo por defecto de <code>{{cssxref("opacity")}}: 0.54</code> al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.</p>
<p>La implementación previa en el motor Gecko era como la pseudo-clase {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.</p>
<h2 id="Ver_además">Ver además</h2>
<ul>
<li>{{cssxref("::placeholder")}}</li>
<li>{{cssxref("::-webkit-input-placeholder")}}</li>
<li>{{cssxref(":-ms-input-placeholder")}}</li>
<li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
<li>{{HTMLElement("input")}}</li>
<li>{{HTMLElement("textarea")}}</li>
</ul>
|
