::placeholder, ::selection y ::marker
Dé estilo a los placeholders de entrada, las selecciones de texto y las viñetas de las listas mediante pseudoelementos.
::placeholder, ::selection y ::marker es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
::placeholder
::placeholder aplica estilos al texto de marcador de posición dentro de los elementos de formulario input y textarea. Solo se admite un subconjunto de las propiedades CSS.
<input type="text" placeholder="Type your name…" />Propiedades compatibles con ::placeholder
No todas las propiedades CSS funcionan en ::placeholder. Entre las propiedades compatibles se incluyen: color, font-size, font-weight, font-style, letter-spacing, opacity y algunas otras. Las propiedades de diseño no son compatibles.
Accesibilidad de los marcadores de posición
El texto de marcador de posición desaparece cuando los usuarios escriben y NO debe utilizarse como sustituto de los elementos <label>. Proporcione siempre etiquetas visibles para los campos de formulario. El contraste del marcador de posición también debe cumplir la proporción 4.5:1 de WCAG.
::selection
::selection aplica estilos al texto que el usuario ha resaltado con el cursor. Permite crear colores de selección de marca.
<p>Select this text with your cursor to see the branded highlight color.</p>Propiedades compatibles con ::selection
Solo unas pocas propiedades funcionan con ::selection: color, background-color, text-shadow y text-decoration. Las demás se ignoran.
::marker
::marker aplica estilos al marcador de los elementos de lista: la viñeta o el número de las listas <ul> y <ol>.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>Propiedades compatibles con ::marker
Entre las propiedades compatibles con ::marker se incluyen: color, content, font-size, font-family, font-weight, font-style y unicode-bidi.
Marcadores de lista personalizados con ::marker
Utilice emojis o caracteres especiales como marcadores de lista:
<ul>
<li>Normal item</li>
<li class="warning">Warning item</li>
</ul>::first-line
::first-line aplica estilos a la primera línea renderizada de un elemento de bloque: la línea tal como se renderiza, no el primer salto de línea del HTML. Es útil para aplicar a los párrafos iniciales un estilo similar al de las letras capitulares.
<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>::first-letter
::first-letter selecciona la primera letra de la primera línea formateada. Su uso clásico son las letras capitulares de la tipografía de estilo editorial.
<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>::cue para aplicar estilos a subtítulos
::cue aplica estilos a los subtítulos VTT en elementos HTML <video>: un pseudoelemento especializado, pero importante, para los medios accesibles.
<p style="color:#888;">::cue styles VTT subtitle text inside a <video> element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>Comprobación rápida
¿Qué pseudoelemento permite aplicar estilos a la viñeta o al número de un elemento de lista?
Resumen
::placeholder aplica estilos al texto de marcador de posición de los campos de entrada. ::selection aplica estilos al texto resaltado. ::marker aplica estilos a las viñetas y los números de las listas. ::first-letter y ::first-line permiten realizar ajustes tipográficos precisos. Todos admiten únicamente un subconjunto limitado de propiedades CSS.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «::placeholder, ::selection y ::marker» es gratis?
Sí — el texto completo de «::placeholder, ::selection y ::marker» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «::placeholder, ::selection y ::marker»?
Dé estilo a los placeholders de entrada, las selecciones de texto y las viñetas de las listas mediante pseudoelementos. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «::placeholder, ::selection y ::marker»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Contenido de ::before y ::after
- ::placeholder, ::selection y ::marker
- Contadores CSS con ::before
- Patrones decorativos con pseudoelementos