Karet alakú - CSS-trükkök

Anonim

A caret-shapeCSS tulajdonság megváltoztatja a szerkeszthető elemek belsejében a kurzor alakját, ami azt jelzi, hogy a felhasználó gépel. Ez a CSS Basic felhasználói interfészek 4. szintű modul része, amely jelenleg Working Draft állapotban van.

Amint írok, a caret az a kis villogó sáv, amely minden általam begépelt karaktert követ.

Használhatjuk caret-shapea sáv megváltoztatására valami másra, például mondjuk egy blokkra:

.element ( caret-shape: block; )

Ez olyan karettát állít elő, amely jobban hasonlít a parancssorba történő beíráskor:

Szintaxis

caret-shape: auto | bar | block | underscore
  • Kezdő érték: auto
  • A következőkre vonatkozik: olyan elemek, amelyek elfogadják a bemenetet
  • Örökölt: igen
  • Százalékok: n / a
  • Számított érték: megadott kulcsszó
  • Animáció típusa: kiszámított érték szerint

Értékek

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

Jelenleg nincs sok böngészőtámogatásunk caret-shape(lásd alább), de itt bemutatjuk ezeket az értékeket.

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

Böngésző támogatás

Úgy tűnik, hogy semmilyen adat nem áll rendelkezésre a Caniuse-ban, de néhány gyors teszteléssel itt találtam:

AZAZ Él Firefox Króm Szafari Opera
Nem Nem Nem Nem Nem Összes
Android Chrome Android Firefox Android böngésző iOS Safari Opera Mobile
Nem Nem Nem Nem Nem

Ezt „hamisíthatjuk”

Míg a böngésző támogatása az, mi valójában megismételhetjük a hatást más CSS varázslatokkal is.

Ez az a fajta dolog, amelyet ezen az írógép-animáción használnak:

Több információ

  • CSS Basic felhasználói felület modul 4, szint (Munka tervezet)

Kapcsolódó tulajdonságok

Almanach 2021. január 27-én

hiányjel

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