Stříška - Triky CSS

Anonim

caret-shapeNemovitost v CSS změní tvar textového kurzoru uvnitř upravitelných prvků, které naznačuje, že uživatel je psaní. Je součástí modulu CSS Basic User Interfaces Level 4, který je aktuálně ve stavu Working Draft.

Jak píšu, stříška je malá blikající lišta, která následuje po každém znaku, který zadám.

Můžeme použít caret-shapezměnit tuto lištu na něco jiného, ​​jako je například blok:

.element ( caret-shape: block; )

Tím se vytvoří stříška, která se více podobá tomu, co byste mohli vidět při psaní do příkazového řádku:

Syntax

caret-shape: auto | bar | block | underscore
  • Počáteční hodnota: auto
  • Platí pro: prvky, které přijímají vstup
  • Zděděno: ano
  • Procenta: n / a
  • Vypočítaná hodnota: zadané klíčové slovo
  • Typ animace: podle vypočítané hodnoty

Hodnoty

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

V tuto chvíli nemáme velkou podporu prohlížeče caret-shape(viz níže), ale zde je vykreslení těchto hodnot.

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

Podpora prohlížeče

Nevypadá to, že by v Caniuse byla k dispozici nějaká data, ale při rychlém testování jsem našel toto:

TJ Okraj Firefox Chrome Safari Opera
Ne Ne Ne Ne Ne Všechno
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mobile
Ne Ne Ne Ne Ne

Můžeme to „předstírat“

Zatímco podpora prohlížeče je to, čím je, můžeme efekt skutečně replikovat pomocí jiné magie CSS.

To je něco, co se používá v této animaci psacího stroje:

Více informací

  • CSS modul základního uživatelského rozhraní úrovně 4 (pracovní koncept)

Související vlastnosti

Almanach 27. ledna 2021

stříška

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