caret-shape
Proprietatea î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-shape
pentru 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.
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 2021semn de omisiune
.element ( caret: #ff7a18 underscore; )
Chris Coyier