Caret - CSS-Tricks

Cuprins

caretîn CSS este o proprietate stenogramă care combină proprietățile caret-colorși caret-shapeîntr-o singură declarație. Deci, vom scrie acest lucru:

.element ( caret: #ff7a18 underscore; )

... ceea ce este asemănător cu scrierea asta:

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

Aceasta este o comandă rapidă frumoasă atunci când doriți să schimbați culoarea și forma unui caret. Și ce este un caret, întrebi? Probabil că sunteți cel mai familiarizați când vedeți unul când introduceți un element editabil, cum ar fi o introducere de text sau o zonă de text. Tastez această postare în WordPress, care este în esență un câmp de formă gigant, și acesta este caretul pe care îl văd clipind la mine:

Deci, prin setarea caret-colorla, să spunem, #ff7a18și caret-shapela ceva de genul underscore, ne-am putea aștepta să vedem așa ceva:

Sintaxă

caret: ||

Sintaxa poate lua o valoare sau alta ... sau ambele! Dacă o valoare este goală, atunci se utilizează valoarea sa inițială, care este autopentru ambele proprietăți constitutive.

Iniţială: auto
Se aplică: elementelor care acceptă intrarea
Moștenit: da
Procente: n / a
Valoare calculată: vezi proprietățile individuale
Tipul de animație: nu este animabil

Valori

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;

Suport pentru browser

Nimeni în acest moment. Proprietatea este inițial definită în specificația CSS Basic Interface Module Level 4, care se află în prezent în Editor's Draft. Asta înseamnă că există încă loc pentru modificări care trebuie făcute de acum până când devine o recomandare pentru implementarea browserelor.

Între timp, putem sorta „fals” caretproprietatea cu alte magii CSS.