از ویژگی caret-color جهت مشخص کردن رنگ Caret بهره بری و استفاده می می شود. زمانی که در حال تایپ کردن داخل یک عنصر ورودی مثل input هستیم، نشانگر چشمک زنی در محل کاراکتر فعلی وجود دارد، به آن هم نشانگر که معمولا یک خط راست عمودی هست Caret گفته می می شود.

Caret را با Cursor اشتباه نگیریم! زمانی که نشانگر موس را بر روی یک عنصر می بریم و همچنین آن هم نشانگر به اشکال متنوع و گوناگون و مختلف مثل دست و همچنین غیره تغییر پیدا کردن می می شود، به آن هم نشانگر cursor گفته می می شود و همچنین با آن ویژگی کاملا نامرتبط می باشد.

سینتکس آن ویژگی بصورت زیر می باشد:

caret-color: auto | <color>

auto

بصورت پیشفرض مقدار آن ویژگی auto می باشد که آن یعنی نرم افزار مرورگر اینترنتی یک رنگ خاص را جهت آن نشانگر مشخص کردن می کند که عموما currentColor می باشد ولی باید توجه داشت نرم افزار مرورگر اینترنتی می تواند بر اساس فاکتورهایی مثل رنگ متن، سایه ها و همچنین غیره رنگ غیره ای را جهت آن نشانگر انتخاب کند تا بهتر جهت کاربر قابل دیدن و همچنین تشخیص باشد.

<color>

همچنین می قدرت یک رنگ خاص جهت Caret مشخص کردن کرد. به عنوان نمونه:

caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

مثال:

.input 
caret-color: #5729e9;

آن ویژگی جهت هر عنصری که از نوع ورودی هست کاربرد دارد، آن یعنی عناصری مثل input، textarea و همچنین هر عنصر غیره ای که شامل ویژگی contenteditable می باشد.

دموی زیر را بررسی کردن کنید:

See the Pen caret-color by Mojtaba Seyedi (@seyedi) on CodePen.

همچنین به آن ویژگی می قدرت انیمیشن زیبای نیز اعمال کرد که دموی زیر آن موضوع را دیدن کردن و نمایش داده می باشد:

See the Pen rainbowcaret by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی نرم افزار مرورگر اینترنتی ها