Formă de caret - CSS-Tricks

Anonim

caret-shapeProprietatea în CSS schimbă forma cursorului de text în interiorul elementelor editabile care indică un utilizator este tastarea. Face parte din modulul CSS Basic User Interfaces Module Level 4, care se află în prezent în starea Working Draft.

În timp ce scriu, cursorul este mica bară intermitentă care urmărește fiecare caracter pe care îl tastez.

Putem folosi caret-shapepentru a schimba bara respectivă cu altceva cum ar fi, să zicem, un bloc:

.element ( caret-shape: block; )

Aceasta va produce un cursor care seamănă mai mult cu ceea ce ați putea vedea când tastați linia de comandă:

Sintaxă

caret-shape: auto | bar | block | underscore
  • Valoarea initiala: auto
  • Se aplică: elementelor care acceptă intrarea
  • Moștenit: da
  • Procente: n / a
  • Valoare calculată: cuvânt cheie specificat
  • Tipul de animație: după valoarea calculată

Valori

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

Momentan nu avem o mulțime de suport pentru browser caret-shape(vezi mai jos), dar iată o redare a acestor valori.

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

Suport pentru browser

Se pare că nu există date disponibile în Caniuse, dar cu câteva teste rapide, iată ce am găsit:

IE Margine Firefox Crom Safari Operă
Nu Nu Nu Nu Nu Toate
Android Chrome Android Firefox Browser Android Safari iOS Opera Mobile
Nu Nu Nu Nu Nu

Putem „falsifica” acest lucru

Deși suportul pentru browser este ceea ce este, putem efectiv reproduce efectul cu alte magii CSS.

Acesta este genul de lucruri utilizate în această animație pentru mașină de scris:

Mai multe informatii

  • CSS Modulul de interfață de utilizator de nivel 4 (schiță de lucru)

Proprietăți conexe

Almanah la 27 ianuarie 2021

semn de omisiune

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