Карет - 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
Застосовується до: елементів, які приймають введення
Успадковано: так
Відсотки: н / д
Обчислене значення: див. Окремі властивості
Тип анімації: не анімаційний

Цінності

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 рівня 4, яка наразі знаходиться у чернетці редактора. Це означає, що є ще місце для змін, які слід вносити з цього моменту до того часу, коли це стане рекомендацією для впровадження браузерами.

Тим часом ми можемо сортувати caretвластивість за допомогою іншої магії CSS.