caret-color

از ویژگی 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.

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