Tvar striešky - Triky CSS

Anonim

caret-shapeNehnuteľnosť v CSS zmení tvar textového kurzora vnútri upraviteľných prvkov, ktoré naznačuje, že používateľ je písanie. Je súčasťou modulu základných používateľských rozhraní CSS úrovne 4, ktorý je momentálne v stave Pracovný koncept.

Keď píšem, vsuvka je malá blikajúca lišta, ktorá nasleduje za každým znakom, ktorý napíšem.

Túto caret-shapelištu môžeme zmeniť na niečo iné, napríklad na blok:

.element ( caret-shape: block; )

Tak vznikne vsuvka, ktorá sa viac podobá tomu, čo by ste mohli vidieť pri zadávaní do príkazového riadku:

Syntax

caret-shape: auto | bar | block | underscore
  • Pôvodná hodnota: auto
  • Vzťahuje sa na: prvky, ktoré prijímajú vstupy
  • Zdedené: áno
  • Percentá: n / a
  • Vypočítaná hodnota: zadané kľúčové slovo
  • Typ animácie: podľa vypočítanej hodnoty

Hodnoty

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

Momentálne nemáme veľkú podporu prehľadávačov caret-shape(pozri nižšie), tu je však vykreslenie týchto hodnôt.

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

Podpora prehliadača

Zdá sa, že v Caniuse nie sú k dispozícii žiadne údaje, ale pri rýchlom testovaní som našiel nasledujúce:

IE Hrana Firefox Chrome Safari Opera
Nie Nie Nie Nie Nie Všetky
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mobile
Nie Nie Nie Nie Nie

Toto môžeme „predstierať“

Aj keď podpora prehliadača je to, čo to je, môžeme tento efekt skutočne replikovať pomocou iných mág CSS.

To je druh veci, ktorá sa používa v tejto animácii písacieho stroja:

Viac informácií

  • Modul základného používateľského rozhrania CSS, úroveň 4 (pracovný koncept)

Súvisiace vlastnosti

Almanach 27. januára 2021

strieška

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