::placeholder ::selection e ::marker
Estilize placeholders de input, seleções de texto e marcadores de listas com pseudo-elementos.
::placeholder ::selection e ::marker é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
::placeholder
::placeholder estiliza o texto de espaço reservado dentro dos elementos de entrada de formulário e textarea. Somente um subconjunto das propriedades CSS é compatível.
<input type="text" placeholder="Type your name…" />Propriedades compatíveis com ::placeholder
Nem todas as propriedades CSS funcionam com ::placeholder. Entre as propriedades compatíveis estão: color, font-size, font-weight, font-style, letter-spacing, opacity e algumas outras. As propriedades de layout não são compatíveis.
Acessibilidade do texto de espaço reservado
O texto de espaço reservado desaparece quando os usuários digitam e NÃO deve ser usado como substituto dos elementos <label>. Sempre forneça rótulos visíveis para os campos de formulário. O contraste do texto de espaço reservado também deve atender à proporção de 4.5:1 da WCAG.
::selection
::selection estiliza o texto que o usuário selecionou com o cursor. Ele cria cores de seleção personalizadas para a identidade visual.
<p>Select this text with your cursor to see the branded highlight color.</p>Propriedades compatíveis com ::selection
Apenas algumas propriedades funcionam com ::selection: color, background-color, text-shadow e text-decoration. As outras são ignoradas.
::marker
::marker estiliza o marcador do item de lista — o marcador ou número nas listas <ul> e <ol>.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>Propriedades compatíveis com ::marker
Entre as propriedades compatíveis com ::marker estão: color, content, font-size, font-family, font-weight, font-style e unicode-bidi.
Marcadores de lista personalizados com ::marker
Use emojis ou caracteres especiais como marcadores de lista:
<ul>
<li>Normal item</li>
<li class="warning">Warning item</li>
</ul>::first-line
::first-line estiliza a primeira linha renderizada de um elemento de bloco — a linha efetivamente renderizada, não a primeira quebra de linha no HTML. É útil para estilizar o parágrafo introdutório de forma semelhante a uma capitular.
<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 seleciona a primeira letra da primeira linha formatada. Um uso clássico é criar capitulares em uma tipografia no estilo de revistas.
<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>::cue para estilizar legendas
::cue estiliza legendas VTT em elementos HTML <video> — um pseudo-elemento especializado, mas importante, para mídias acessíveis.
<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>Verificação rápida
Qual pseudo-elemento permite estilizar o marcador ou número de um item de lista?
Recapitulação
::placeholder estiliza o texto de espaço reservado de campos de entrada. ::selection estiliza o texto selecionado. ::marker estiliza marcadores e números de listas. ::first-letter e ::first-line permitem ajustes tipográficos detalhados. Todos são compatíveis apenas com um subconjunto limitado de propriedades CSS.
Perguntas Frequentes
A aula “::placeholder ::selection e ::marker” é grátis?
Sim — o texto completo de “::placeholder ::selection e ::marker” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “::placeholder ::selection e ::marker”?
Estilize placeholders de input, seleções de texto e marcadores de listas com pseudo-elementos. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “::placeholder ::selection e ::marker”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Conteúdo de ::before e ::after
- ::placeholder ::selection e ::marker
- Contadores CSS com ::before
- Padrões Decorativos com Pseudo-elementos