files/es/web/css/_colon_-moz-placeholder/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
114
115
116
117
118
119
120
121
122
123

---
title: ':-moz-placeholder'
slug: 'Web/CSS/:-moz-placeholder'
tags:
  - CSS
  - Marcador de Posición INPUT
  - Marcador de posición
  - No estándar(2)
  - Placeholder
  - Pseudo-Clase CSS
  - Referencia CSS
translation_of: 'Web/CSS/:placeholder-shown'
translation_of_original: 'Web/CSS/:-moz-placeholder'
---
<div class="note"><strong>Nota:</strong> La pseudo-clase CSS <code>:-moz-placeholder</code> está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.</div>

<div class="note"><strong>Nota: </strong> El CSSWG ha decidido introducir  <code>:placeholder-shown</code>. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}</div>

<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div>

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

<p><code>La </code><a href="/es/docs/CSS/Pseudo-classes">pseudo-clase </a><code>:-moz-placeholder</code> representa a cualquier elemento que muestre un  <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder)</a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,</p>

<h2 id="Ejemplo">Ejemplo</h2>

<h3 id="Ejemplo_básico">Ejemplo básico</h3>

<p>Este ejemplo le da estilo a un <em>placeholder</em> (marcador de posición) haciendo que el color del texto sea verde.</p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Placeholder demo&lt;/title&gt;
  &lt;style type="text/css"&gt;
    input::-moz-placeholder {
      color: green;
    }
    input:-moz-placeholder {
      color: green;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;input id="test" placeholder="Placeholder text!"&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>{{EmbedLiveSample("Basic_example")}}</p>

<h3 id="Desbordamiento">Desbordamiento</h3>

<p>En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS <code>text-overflow: ellipsis</code> para envolverlo.</p>

<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }
</pre>

<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</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</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>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Implementado en {{bug("457801")}}.</p>

<h2 id="Ver_además">Ver además</h2>

<ul>
 <li><a href="/es/docs/Web/Guide/HTML/Forms_in_HTML">Formularios en HTML</a></li>
 <li>{{HTMLElement("input")}}</li>
 <li>{{HTMLElement("textarea")}}</li>
</ul>