بروز رسانی دی ۲۶ام, ۱۳۹۹ ۳:۰۴ بعد از ظهر
تیر ۲۵, ۱۳۹۷ admin آموزش پیشرفته css, آموزش مقدماتی css 0
از ویژگی caret-color جهت مشخص کردن رنگ Caret بهره بری و استفاده می می شود. زمانی که در حال تایپ کردن داخل یک عنصر ورودی مثل input
هستیم، نشانگر چشمک زنی در محل کاراکتر فعلی وجود دارد، به آن هم نشانگر که معمولا یک خط راست عمودی هست Caret گفته می می شود.
Caret را با Cursor اشتباه نگیریم! زمانی که نشانگر موس را بر روی یک عنصر می بریم و همچنین آن هم نشانگر به اشکال متنوع و گوناگون و مختلف مثل دست و همچنین غیره تغییر پیدا کردن می می شود، به آن هم نشانگر cursor گفته می می شود و همچنین با آن ویژگی کاملا نامرتبط می باشد.
سینتکس آن ویژگی بصورت زیر می باشد:
caret-color: auto | <color>
بصورت پیشفرض مقدار آن ویژگی auto
می باشد که آن یعنی نرم افزار مرورگر اینترنتی یک رنگ خاص را جهت آن نشانگر مشخص کردن می کند که عموما currentColor می باشد ولی باید توجه داشت نرم افزار مرورگر اینترنتی می تواند بر اساس فاکتورهایی مثل رنگ متن، سایه ها و همچنین غیره رنگ غیره ای را جهت آن نشانگر انتخاب کند تا بهتر جهت کاربر قابل دیدن و همچنین تشخیص باشد.
همچنین می قدرت یک رنگ خاص جهت 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.
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
فروردین ۰۲, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0