Карета - CSS-трикове

Съдържание

caretв CSS е краткият имот, който съчетава caret-colorи caret-shapeсвойства в една декларация. И така, трябва да напишем това:

.element ( caret: #ff7a18 underscore; )

... което е подобно на писането на това:

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

Това е хубав пряк път, когато искате да промените цвета и формата на карета. И какво е каре, ще попитате? Вероятно най-добре ви е да виждате такъв, когато пишете в редактируем елемент, като въвеждане на текст или текстово поле. Пиша тази публикация в WordPress, която по същество е едно гигантско поле на формата и това е каретата, която виждам да ми мига:

Така че, като зададем на, caret-colorда речем, #ff7a18и на caret-shapeнещо подобно underscore, може да очакваме да видим нещо подобно:

Синтаксис

caret: || 

Синтаксисът може да приема една или друга стойност ... или и двете! Ако дадена стойност е празна, тогава се използва първоначалната й стойност, която е и autoза двете съставни свойства.

  • Първоначално: auto
  • Прилага се за: елементи, които приемат вход
  • Наследен: да
  • Проценти: n / a
  • Изчислена стойност: вижте отделни свойства
  • Тип анимация: не е анимационен

Стойности

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;

Поддръжка на браузър

В момента няма. Свойството първоначално е дефинирано в спецификацията CSS Basic User Interface Module Level 4, която в момента е в Чернова на редактора. Това означава, че все още има място за промени, които да бъдат направени между сега и когато това стане препоръка за браузърите да се приложат.

Междувременно можем да сортираме „фалшификат“ на caretсобствеността с някаква друга CSS магия.

Свързани свойства

Алманах на 27 януари 2021 г.

карета-цвят

.element ( caret-color: red; ) Джеф Греъм

Интересни статии...