Caret-formos - CSS-gudrybės

Anonim

caret-shapeCSS nuosavybė keičia teksto kursorių redaguojamą elementų, kurie rodo vartotojas rašo formą. Tai yra 4 lygio CSS pagrindinių vartotojo sąsajų modulio dalis, kuri šiuo metu yra darbinio juodraščio būsenoje.

Kaip rašau, „caret“ yra maža mirksinti juosta, kuri seka kiekvieną mano įvestą personažą.

Mes galime naudoti, caret-shapekad pakeistume šią juostą į kažką kitą, pavyzdžiui, bloką:

.element ( caret-shape: block; )

Tai sukurs skydą, panašesnį į tai, ką galite pamatyti įvesdami komandinę eilutę:

Sintaksė

caret-shape: auto | bar | block | underscore
  • Pradinė vertė: auto
  • Taikoma elementams, kurie priima įvestį
  • Paveldima: taip
  • Procentai: nėra
  • Apskaičiuota vertė: nurodytas raktinis žodis
  • Animacijos tipas: pagal apskaičiuotą vertę

Vertybės

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

Šiuo metu mes neturime daug naršyklės palaikymo caret-shape(žr. Toliau), bet čia pateikiamos šios vertės.

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

Naršyklės palaikymas

Panašu, kad „Caniuse“ nėra jokių duomenų, tačiau atlikus keletą greitų bandymų, štai ką radau:

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne Ne Ne Ne Ne Viskas
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mobile“
Ne Ne Ne Ne Ne

Mes galime tai „padirbti“

Nors naršyklės palaikymas yra toks, koks yra, mes iš tikrųjų galime pakartoti efektą su kita CSS magija.

Tai dalykas, naudojamas šiai rašomosios mašinėlės animacijai:

Daugiau informacijos

  • CSS pagrindinio vartotojo sąsajos modulio 4 lygis (darbinis projektas)

Susijusios savybės

Almanachas 2021 m. Sausio 27 d

caret

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