خاصية caret-color
آخر تحديث: 2026-09-13
caret-color خاصية caret-color
تضبط الخاصية caret-color لون المؤشر — الخط العمودي الوامض — في العناصر القابلة للتحرير مثل حقول الإدخال ومناطق النص. وتتيح تخصيص لون المؤشر جعل عناصر النموذج متناسقة مع لوحة ألوان الصفحة أو إبراز موضع الإدخال الحالي.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
caret-color: auto | <color>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | لون المؤشر الافتراضي |
<color> | النوع | لون المؤشر |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| caret-color | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： auto هي القيمة الافتراضية وعادةً تطابق لون نص العنصر؛ وتؤدي إضافة لون محدد إلى تجاوزها بشكل مستقل.
تلميح： caret-color خاصية قابلة للوراثة، لذا يمكنك ضبطها مرة واحدة على العنصر الأصلي ويتوارث لونها إلى العناصر الفرعية.
❓ الأسئلة الشائعة
Qما تنسيقات الألوان التي تدعمها الخاصية caret-color في CSS؟
Aتدعم جميع تنسيقات ألوان CSS: الكلمات المفتاحية (red، blue)، والست عشري (#3498db)، و rgb()/rgba()، و hsl()/hsla()، وقيم خاصة مثل currentColor. والقيمة auto هي الافتراضية، فيتبع المؤشر لون نص العنصر. كما تدعم انتقال اللون عبر الحركة، رغم أن ذلك نادر الاستخدام عمليًا.
Qما الفرق بين caret-color و cursor في CSS؟
Aتضبط caret-color لون مؤشر النص (الخط العمودي الوامض) داخل حقول الإدخال ومناطق النص — محتوى قابل للتحرير. وتضبط cursor شكل مؤشر الماوس عند التحويم فوق عنصر — تغذية راجعة لجهاز المؤشر. تبدو الأسماء متشابهة، لكن الكائنات مختلفة تمامًا: أحدهما مؤشر المحتوى، والآخر مؤشر الماوس.
Qلماذا لا يؤدي caret-color إلى أي تأثير على حقل الإدخال؟
Aتحقق مما إذا كان مطبَّقًا على عنصر قابل للتحرير (input، أو textarea، أو عنصر contenteditable) — فالنص العادي غير القابل للتحرير لا يحتوي على مؤشر. كما قد يتجاوز المتصفح الألوان المخصصة في أوضاع المظهر الإجباري مثل سمات النظام عالية التباين. وكل المتصفحات الرئيسية (Chrome و Firefox و Safari و Edge) تدعمها، لكن الإصدارات الأقدم من Safari لديها دعم جزئي لبعض الصيغ.
Qهل يمكن تطبيق الخاصية caret-color على العناصر contenteditable؟
Aنعم. تمتلك العناصر contenteditable مؤشر نص مثل input و textarea، لذا يعمل caret-color عليها أيضًا — ويمكنك منح محررات النص الغني والعناوين القابلة للتحرير لون مؤشر موحّد يناسب نظام التصميم لديك. وهي خاصية قابلة للوراثة: اضبطها على الحاوية الأصلية ليتوارث لونها إلى العناصر الفرعية.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
