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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: '::placeholder'
slug: 'Web/CSS/::placeholder'
tags:
- '::placeholder'
- CSS
- Pseudo-elemento
- Referencia
translation_of: 'Web/CSS/::placeholder'
---
<div>{{CSSRef}}</div>
<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a> <strong><code>::placeholder</code></strong> representa el <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto provisional</a> en un elemento {{HTMLElement("input")}} o un elemento {{HTMLElement("textarea")}}.</p>
<pre class="brush: css no-line-numbers">::placeholder {
color: blue;
font-size: 1.5em;
}</pre>
<p>Solo el subconjuto de las propiedades CSS que aplican al pseudo-elemento {{cssxref("::first-line")}} puede ser usado en una regla utilizando <code>::placeholder</code> en su selector.</p>
<div class="note">
<p><strong>Nota:</strong> En la mayoría de navegadores, la apariencia del texto provisional es traslúcido o un color gris claro por defecto.</p>
</div>
<h2 id="Sintáxis">Sintáxis</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Texto_rojo">Texto rojo</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush:html line-numbers language-html"><input placeholder="Type something here!"></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}</pre>
<h4 id="Resultado">Resultado</h4>
<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p>
<h3 id="Texto_verde">Texto verde</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush:html line-numbers language-html"><input placeholder="Type something here..."></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">input::placeholder {
color: green;
}
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p>
<h2 id="Preocupaciones_por_la_accesibilidad">Preocupaciones por la accesibilidad</h2>
<h3 id="Contraste_de_color">Contraste de color</h3>
<h4 id="Contraste_de_color_2">Contraste de color</h4>
<p>El texto temporal generalmente tiene un color más claro para indicar que es una sugerencia para el tipo de entrada que será válido, y no es una entrada real de cualquier tipo.</p>
<p>Es importante asegurarse que el radio de contraste entre el color del texto provisional y el fondo de la entrada es lo suficientemente alto para que las personas que experimenten condiciones de visión baja sean capaces de leer el texto mientras también asegurarse que hay diferencia suficiente entre el color del texto temporal y el color del texto de entrada para que los usuarios no confundad el texto provisional con la información de ingreso.</p>
<p>El radio del color de contraste es determinado al comparar la luminosidad entre dos colores. Para cumplir las actuales <a href="https://www.w3.org/WAI/standards-guidelines/wcag/es">Pautas de Accesibilidad para el Contenido Web (WCAG)</a>, un radio de 4.5:1 es requerido para el contenido de un texto y 3:1 para textos más grandes como encabezados. Un texto grando es definido como 18.66px o mayor en negritas; o 24px o mayor.</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Comprobador de contraste de color</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Entendiendo WCAG, Explicaciones del lineamiento 1.4</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Entendiendo críterios exitósos 1.4.3 | W3C Entendiendo WCAG 2.0</a></li>
</ul>
<h4 id="Usabilidad">Usabilidad</h4>
<p>Un texto temporal con suficiente contraste puede ser interpretado como una entrada. El texto provisional podría desaparecer cuando una persona ingresa contenido en un elemento {{htmlelement("input")}}. Ámbas circunstancias pueden interferir con el correcto llenado de un formulario, especialmente para personas con dificultades cogniticas.</p>
<p>Un acercamiento alternativo para proveer información provisional es incluirla afuera del campo de entrada en proximidad visual, entonces usar <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> para programáticamente asociar la entrada {{HTMLElement("input")}} con su sugerencia.</p>
<p>Con esta implementación, el contenido de la sugerencia, esta disponible incluso cuando información es ingresada en el campo de entrada, y la entrada aparece libre de una <em>entrada</em> preexistente cuando la página ha cargado. Muchas de las tecnologías de lectores de pantalla usan <code>aria-describedby</code> para leer la sugerencia después de que la etiqueta de la entrada de texto hay sido anunciada, y la persona utilizando el lector de pantalla puede silenciarla si encuentra la información adicional innecesaria..</p>
<pre class="brush:html line-numbers language-html"><label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
</pre>
<ul>
<li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group</a></li>
</ul>
<h3 id="Modo_de_alto_contraste_de_Windows">Modo de alto contraste de Windows</h3>
<p>El campo temporal puede aparecer con el mismo estilo como el texto ingresado por el usuario cuando se utiliza el <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Modo de alto contraste de Windows</a>. Eso hará difícil para algunas personas determinar que contenido ha sido ingresado y que contenido es un texto temporal</p>
<ul>
<li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Cómo usar -ms-high-contrast (How to use -ms-high-contrast)</a></li>
</ul>
<h3 id="Etiquetas">Etiquetas</h3>
<p>El texto provisional no es un reemplazo para el elemento {{htmlelement("label")}}. Sin una etiqueta que ha sido programaticamente asociada con la entrada usando una combinación de los atributos {{htmlattrxref("for", "label")}} y {{htmlattrxref("id")}}, tecnología asistiva como los lectores de pantalla no pueden leer los elementos {{htmlelement("input")}}.</p>
<ul>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">Sugerencias básicas de formularios (MDN Basic form hints)</a></li>
<li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group</a></li>
</ul>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
<div>
<p>{{Compat("css.selectors.placeholder")}}</p>
</div>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>La pseudo-clase {{cssxref(":placeholder-shown")}} provee estilos a un elemento que <em>tiene</em> un texto provisional activo.</li>
<li>Elementos HTML relacionados: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
<li><a href="/en-US/docs/Learn/HTML/Forms">Formularios HTML</a></li>
</ul>
|
