Caret-shape - Trucchi CSS

Anonim

La caret-shapeproprietà in CSS cambia la forma del cursore del testo all'interno degli elementi modificabili che indicano che un utente sta digitando. Fa parte del modulo CSS Basic User Interfaces Livello 4, che è attualmente in stato di Working Draft.

Mentre scrivo, il cursore è la piccola barra lampeggiante che segue ogni carattere digitato.

Possiamo usare caret-shapeper cambiare quella barra in qualcos'altro come, diciamo, un blocco:

.element ( caret-shape: block; )

Questo produrrà un accento circonflesso che è più simile a quello che potresti vedere quando digiti nella riga di comando:

Sintassi

caret-shape: auto | bar | block | underscore
  • Valore iniziale: auto
  • Si applica a: elementi che accettano input
  • Ereditato: sì
  • Percentuali: n / a
  • Valore calcolato: parola chiave specificata
  • Tipo di animazione: per valore calcolato

Valori

caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;

Al momento non abbiamo molto supporto per il browser caret-shape(vedi sotto), ma ecco un rendering di quei valori.

caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

Supporto del browser

Non sembra che nessun dato sia disponibile in Caniuse, ma con alcuni test rapidi, ecco cosa ho trovato:

IE Bordo Firefox Cromo Safari musica lirica
No No No No No Tutti
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
No No No No No

Possiamo "fingere" questo

Sebbene il supporto del browser sia quello che è, possiamo effettivamente replicare l'effetto con altre magie CSS.

Questo è il genere di cose usate nell'animazione di questa macchina da scrivere:

Maggiori informazioni

  • Modulo interfaccia utente di base CSS livello 4 (bozza di lavoro)

Proprietà correlate

Almanacco il 27 gennaio 2021

caret

.element ( caret: #ff7a18 underscore; ) Chris Coyier