CSS caret-color
La proprietà CSS caret-color in CSS4 personalizza il colore del cursore testuale
La proprietà caret-color è stata introdotta in CSS4 e consente di modificare il colore del cursore lampeggiante che appare nei campi input, textarea o contenuti contenteditable. È utile per motivi di design o accessibilità, specialmente su sfondi scuri o interfacce personalizzate.
Sintassi
Significato dei valori principali:
auto: utilizza il colore del testo corrente per il cursore.
color: qualsiasi valore di colore valido (
red,#ff0000,rgb(255,0,0), ecc.) per personalizzare il cursore.
Esempio proprietà: caret-color
Codice Esempio: caret-color
.caret-example {
width: 300px;
padding: 10px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 6px;
caret-color: #ff6347; /* colore personalizzato del cursore */
color: #333;
}
Contenuto Esempio: caret-color
Esempio di utilizzo di caret-color
In questo esempio, cambiamo il colore del cursore lampeggiante in un campo di input:
CSS e HTML per cambiare il colore del cursore:
<style>
.caret-example {
width: 300px;
padding: 10px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 6px;
caret-color: #ff6347;
color: #333;
}
</style>
<input class="caret-example" type="text" placeholder="Scrivi qualcosa qui...">
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
