Caret - CSS-tricks

Indholdsfortegnelse

careti CSS er en forkortelse ejendom, der kombinerer caret-colorog caret-shapeegenskaber i en enkelt erklæring. Så vi skal skrive dette:

.element ( caret: #ff7a18 underscore; )

... der ligner at skrive dette:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

Det er en god genvej, når du vil ændre en opbevarings farve og form. Og hvad er en opbevaring, spørger du? Du er sandsynligvis mest kendt ved at se en, når du skriver i et redigerbart element, såsom et tekstinput eller et tekstområde. Jeg skriver dette indlæg i WordPress, som stort set er et kæmpe formfelt, og dette er det tegn, jeg ser blinke mod mig:

Så ved at indstille caret-colortil, sige og #ff7a18, caret-shapetil noget lignende underscore, kan vi forvente at se noget som dette:

Syntaks

caret: || 

Syntaksen kan tage en eller anden værdi ... eller begge dele! Hvis en værdi er tom, bruges dens indledende værdi, som er autofor begge bestanddele.

  • Initial: auto
  • Gælder for: elementer, der accepterer input
  • Arvet: ja
  • Procentdele: ikke oplyst
  • Beregnet værdi: se individuelle egenskaber
  • Animationstype: ikke animerbar

Værdier

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Browsersupport

Ingen i øjeblikket. Ejendommen er oprindeligt defineret i CSS Basic User Interface Module niveau 4 specifikation, som i øjeblikket er i Editor's Draft. Det betyder, at der stadig er plads til ændringer, der skal foretages mellem nu og når det bliver en anbefaling til browsere at implementere.

I mellemtiden kan vi sortere "falske" caretejendommen med en anden CSS-magi.

Relaterede egenskaber

Almanak den 27. januar 2021

caret-farve

.element ( caret-color: red; ) Geoff Graham

Interessante artikler...