::placeholder ::selection e ::marker
Definisca lo stile dei placeholder degli input, delle selezioni di testo e dei marker degli elenchi con gli pseudo-elementi.
::placeholder ::selection e ::marker è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
::placeholder
::placeholder definisce lo stile del testo segnaposto all'interno degli elementi di input dei moduli e delle textarea. È supportato solo un sottoinsieme delle proprietà CSS.
<input type="text" placeholder="Type your name…" />Proprietà supportate da ::placeholder
Non tutte le proprietà CSS funzionano con ::placeholder. Tra quelle supportate ci sono: color, font-size, font-weight, font-style, letter-spacing, opacity e alcune altre. Le proprietà di layout non sono supportate.
Accessibilità del testo segnaposto
Il testo segnaposto scompare quando gli utenti iniziano a digitare e NON deve essere usato in sostituzione degli elementi <label>. Fornisca sempre etichette visibili per i campi dei moduli. Il contrasto del testo segnaposto deve inoltre rispettare il rapporto WCAG di 4.5:1.
::selection
::selection definisce lo stile del testo evidenziato dall'utente con il cursore. Consente di creare colori di selezione coordinati con il brand.
<p>Select this text with your cursor to see the branded highlight color.</p>Proprietà supportate da ::selection
Con ::selection funzionano solo alcune proprietà: color, background-color, text-shadow e text-decoration. Le altre vengono ignorate.
::marker
::marker definisce lo stile del marcatore dell'elemento dell'elenco, cioè il punto elenco o il numero nelle liste <ul> e <ol>.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>Proprietà supportate da ::marker
Tra le proprietà supportate da ::marker ci sono: color, content, font-size, font-family, font-weight, font-style e unicode-bidi.
Marcatori personalizzati per gli elenchi con ::marker
Utilizzi emoji o caratteri speciali come marcatori degli elenchi:
<ul>
<li>Normal item</li>
<li class="warning">Warning item</li>
</ul>::first-line
::first-line definisce lo stile della prima riga visualizzata di un elemento a blocco: la riga effettiva così come viene visualizzata, non il primo ritorno a capo nell'HTML. È utile per applicare ai paragrafi iniziali uno stile simile al capolettera.
<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 seleziona la prima lettera della prima riga formattata. Un utilizzo classico è il capolettera nella tipografia in stile rivista.
<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>::cue per lo stile dei sottotitoli
::cue definisce lo stile dei sottotitoli VTT negli elementi HTML <video>: un pseudo-elemento specializzato, ma importante per i contenuti multimediali accessibili.
<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 rapida
Quale pseudo-elemento consente di definire lo stile del punto elenco o del numero di un elemento di una lista?
Riepilogo
::placeholder definisce lo stile del testo segnaposto degli input. ::selection definisce lo stile del testo evidenziato. ::marker definisce lo stile dei punti elenco e dei numeri. ::first-letter e ::first-line consentono una regolazione tipografica più precisa. Tutti supportano solo un sottoinsieme limitato delle proprietà CSS.
Domande Frequenti
La lezione «::placeholder ::selection e ::marker» è gratuita?
Sì — il testo completo di «::placeholder ::selection e ::marker» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «::placeholder ::selection e ::marker»?
Definisca lo stile dei placeholder degli input, delle selezioni di testo e dei marker degli elenchi con gli pseudo-elementi. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «::placeholder ::selection e ::marker»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Contenuto ::before e ::after
- ::placeholder ::selection e ::marker
- Contatori CSS con ::before
- Pattern decorativi con gli pseudo-elementi