accent-*

لون عناصر النموذج الأصلية accent-*

يغيّر لون عناصر النموذج التي يرسمها المتصفح نفسه (مربّع الاختيار، الراديو، شريط النطاق) دون إعادة بنائها بالكامل.

مربّع الاختيار (checkbox) وزرّ الراديو (radio) وشريط النطاق (range) عناصر يرسمها المتصفح بمظهره الافتراضي — تخصيصها الكامل تقليديًّا يتطلّب إخفاء العنصر الأصلي وبناء بديل مزيّف بالكامل من عناصر أخرى. accent-color يوفّر طريقًا أقصر: يغيّر لون التحديد فقط (اللون المميّز عند التأشير) مع إبقاء العنصر أصليًّا بكل سلوكه ووصوليته الافتراضية.

يدعم أي لون من ألوان الثيم بما فيها الشفافية (accent-purple-500/50)، وأيضًا قيمًا اعتباطية. النتيجة تناسق بصري مع هوية الموقع بأقل مجهود وأفضل توافق مع تقنيات الوصول (screen readers) من الحلول المزيّفة بالكامل.

الصياغة

class="accent-purple-600"  /* على input type=checkbox/radio/range */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-3 p-4">
  <label class="flex items-center gap-2"><input type="checkbox" class="accent-purple-600" checked /> افتراضي مخصّص</label>
  <input type="range" class="accent-cyan-500" />
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
accent-{color}-{shade}	أي لون من لوحة الثيم (accent-purple-500 مثلًا)
accent-auto	العودة للون الافتراضي في المتصفح
accent-current	استخدام currentColor المرث من العنصر

💡 نصائح عملية

أضِف hover:accent-* لتغيير لون التحديد عند مرور الفأرة كتغذية راجعة إضافية
أخفّ حل لتخصيص شكل عناصر النموذج الأصلية — جرّبه قبل بناء بديل مزيّف كامل بـ appearance-none

⚠️ أخطاء شائعة

توقّع أن accent-color تغيّر شكل الصندوق بالكامل (زواياه، حجمه) — تغيّر اللون فقط ويبقى الشكل من رسم المتصفح
استخدامها على عناصر ليست checkbox/radio/range — لا تأثير لها على عناصر أخرى

خصائص ذات صلة

cursor-* شكل المؤشّر

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs