Caret - Trucchi CSS

Sommario

caretin CSS è una proprietà abbreviata che combina le proprietà caret-colore caret-shapein una singola dichiarazione. Quindi, possiamo scrivere questo:

.element ( caret: #ff7a18 underscore; )

... che è simile a scrivere questo:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

Questa è una bella scorciatoia quando vuoi cambiare il colore e la forma di un cursore. E cos'è un accento circonflesso, chiedi? Probabilmente hai più familiarità nel vederne uno quando scrivi in un elemento modificabile, come un input di testo o un'area di testo. Sto scrivendo questo post in WordPress, che è fondamentalmente un campo di modulo gigante, e questo è il segno che vedo lampeggiare:

Quindi, impostando il caret-colora, diciamo, #ff7a18e il caret-shapesu qualcosa di simile underscore, potremmo aspettarci di vedere qualcosa del genere:

Sintassi

caret: ||

La sintassi può assumere un valore o un altro ... o entrambi! Se un valore è vuoto, viene utilizzato il suo valore iniziale, che è autoper entrambe le proprietà costituenti.

Iniziale: auto
Si applica a: elementi che accettano input
Ereditato: sì
Percentuali: n / a
Valore calcolato: vedere le singole proprietà
Tipo di animazione: non animabile

Valori

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Supporto del browser

Nessuno al momento. La proprietà è inizialmente definita nella specifica CSS Basic User Interface Module Level 4, attualmente in Editor's Draft. Ciò significa che c'è ancora spazio per apportare modifiche da ora a quando diventerà un consiglio da implementare per i browser.

Nel frattempo, possiamo in caretqualche modo "falsificare" la proprietà con qualche altra magia CSS.