Caret-muoto - CSS-temppuja

Anonim

caret-shapeOmaisuus CSS muuttaa muotoa tekstikohdistin sisällä muokattavia elementtejä osoittaa käyttäjän kirjoittaa. Se on osa CSS-peruskäyttöliittymämoduulia Taso 4, joka on tällä hetkellä työluonnoksen tilassa.

Kirjoittaessani caret on pieni vilkkuva palkki, joka seuraa kutakin kirjoittamaani merkkiä.

Voimme caret-shapemuuttaa palkin jollekin muulle, esimerkiksi lauseeksi:

.element ( caret-shape: block; )

Se tuottaa muistiinpanon, joka on enemmän kuin mitä saatat nähdä kirjoittaessasi komentoriville:

Syntaksi

caret-shape: auto | bar | block | underscore
  • Alkuarvo: auto
  • Koskee elementtejä, jotka hyväksyvät syötteen
  • Peritty: kyllä
  • Prosenttiosuudet: n / a
  • Laskettu arvo: määritetty avainsana
  • Animaation tyyppi: lasketun arvon perusteella

Arvot

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

Meillä ei ole tällä hetkellä paljon selaintukea caret-shape(katso alla), mutta tässä on näiden arvojen hahmontaminen.

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

Selaimen tuki

Näyttää siltä, ​​että tietoja ei ole saatavilla Caniusessa, mutta joitain pikatestejä, löysin tämän:

IE Reuna Firefox Kromi Safari Ooppera
Ei Ei Ei Ei Ei Kaikki
Android Chrome Android Firefox Android-selain iOS Safari Opera Mobile
Ei Ei Ei Ei Ei

Voimme "väärentää" tämän

Vaikka selaintuki on mitä se on, voimme tosiasiallisesti toistaa vaikutuksen muulla CSS-taikuudella.

Se on sellainen asia, jota käytetään tässä kirjoituskoneanimaatiossa:

Lisää tietoa

  • CSS-peruskäyttöliittymämoduuli, taso 4 (työluonnos)

Liittyvät ominaisuudet

Almanakka 27. tammikuuta 2021

caret

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