Proprietà CSS caret-color
La proprietà CSS caret-color specifica il colore del cursore di testo. Scopri come utilizzarla con esempi pratici.
La proprietà CSS caret-color imposta il colore del cursore di inserimento — la sottile linea verticale lampeggiante che indica dove apparirà il testo digitato all'interno di un campo di testo o di qualsiasi elemento modificabile. Per impostazione predefinita, il cursore corrisponde al colore del testo dello user agent (di solito nero). Con caret-color è possibile ridipingerlo per adattarlo al proprio brand, migliorare il contrasto rispetto a uno sfondo colorato dell'input, oppure nasconderlo del tutto.
Il cursore è puramente un indicatore di digitazione. Non è lo stesso del cursore del mouse (controllato dalla proprietà cursor) e non influisce sul colore dell'evidenziazione della selezione.
Questa pagina descrive cosa fa caret-color, dove si applica, i valori accettati e i dettagli importanti da conoscere prima di utilizzarlo in produzione.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi che accettano input di testo. |
| Ereditato | Sì. |
| Animabile | Sì (come colore). |
| Versione | CSS3 |
| Sintassi DOM | object.style.caretColor = "#1c87c9"; |
Dove si applica caret-color
Il cursore appare ovunque l'utente possa digitare o posizionare un cursore di modifica del testo, quindi caret-color agisce su:
- Campi
<input>che accettano testo (text,search,email,url,password,tel,number). - Elementi
<textarea>. - Qualsiasi elemento con l'attributo
contenteditableimpostato sutrue.
Poiché la proprietà è ereditata, è possibile impostarla una sola volta su un contenitore (o su :root) e ogni discendente modificabile la erediterà — utile per applicare un tema a un intero form con una singola regola.
Sintassi
caret-color: auto | <color>;Esempio: cursore trasparente vs. cursore personalizzato
Il primo input mantiene il cursore predefinito, il secondo nasconde il cursore con transparent, e il terzo utilizza un blu personalizzato:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.caret-example1 {
caret-color: transparent;
}
.caret-example2 {
caret-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Caret-color property example</h2>
<input value="Default caret color" />
<br />
<br />
<input class="caret-example1" value="Transparent caret color" />
<br />
<br />
<input class="caret-example2" value="Custom caret color" />
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| auto | Il browser sceglie un colore appropriato, di solito currentColor (il colore del testo dell'elemento). Questo è il valore predefinito. |
<color> | Qualsiasi colore CSS valido: un colore con nome, hex (#1c87c9), rgb()/rgba(), oppure hsl()/hsla(). Usa transparent per nascondere il cursore. |
| initial | Reimposta la proprietà al suo valore predefinito (auto). |
| inherit | Prende il valore calcolato dall'elemento genitore. |
Qualsiasi formato colore è valido, quindi le seguenti dichiarazioni sono tutte corrette:
caret-color: red; /* named color */
caret-color: #1c87c9; /* hex */
caret-color: rgb(28 135 201);/* rgb */
caret-color: hsl(202 76% 45%);/* hsl */
caret-color: transparent; /* invisible caret */Consulta i nomi dei colori CSS per l'elenco completo delle parole chiave, e la proprietà color per capire come viene risolto currentColor.
Dettagli e suggerimenti
autosi risolve incurrentColor. Se si cambia solo ilcolordel testo, il cursore lo segue automaticamente — spesso non è necessario usarecaret-coloraffatto, a meno che non si voglia che il cursore differisca dal testo.transparentnasconde il cursore senza disabilitare la modifica. Il campo continua ad accettare input; scompare solo l'indicatore lampeggiante. Evitare questo comportamento nei form reali — un cursore invisibile danneggia l'usabilità e l'accessibilità.- Nessun effetto sugli elementi non modificabili. Impostare
caret-colorsu un<div>senzacontenteditable, o su un input disabilitato o in sola lettura, non produce alcun effetto perché non viene disegnato alcun cursore. - Attenzione al contrasto. Un cursore che si confonde con uno sfondo scuro dell'input può essere difficile da trovare. Scegli un colore che risalti, proprio come faresti per il contrasto del testo.
- È animabile. Poiché il valore è un colore, è possibile applicare una transizione — ad esempio, per far sfumare il cursore verso un colore di evidenziazione quando un input riceve il focus.
input {
caret-color: #999;
transition: caret-color 0.2s ease;
}
input:focus {
caret-color: #1c87c9;
}Supporto browser
caret-color è supportata da tutti i browser moderni (Chrome, Edge, Firefox, Safari e Opera). Si degrada in modo elegante: i browser che non la riconoscono mostrano semplicemente il cursore predefinito, quindi non vi è alcun rischio nell'utilizzarla senza un fallback.
Proprietà correlate
color— colore del testo e sorgente dicurrentColora cuicaret-color: autofa riferimento.outline-color— colore del contorno di focus spesso visualizzato insieme a un input attivo.opacity— riduce l'opacità di un elemento, incluso il suo cursore.