accent-color

لون عناصر النموذج accent-color

accent-color يلوّن عناصر النموذج الأصلية (checkbox، radio، range، progress) بلون هويتك — بلا إعادة بنائها من الصفر بـ CSS معقّد.

تلوين مربّع اختيار أو زر راديو أصلي كان يتطلّب تقليديًا إخفاء العنصر الأصلي بالكامل وبناء تصميم بديل بـ CSS وHTML إضافي (حيلة شائعة لكنها كود زائد). accent-color: #7c5cff; يلوّن العنصر الأصلي مباشرة، محافظًا على كل سلوكه الأصلي (لوحة المفاتيح، قارئ الشاشة) بلا أي هندسة إضافية.

ينطبق حاليًا على أربعة عناصر فقط: <input type="checkbox">، <input type="radio">، <input type="range">، و<progress> — لا يلوّن عناصر أخرى مثل <select> أو أزرار عادية. القيمة الافتراضية auto تترك القرار للمتصفح ونظام التشغيل.

الصياغة

input[type="checkbox"],
input[type="radio"] {
  accent-color: #7c5cff;
}

:root { accent-color: #7c5cff; }  /* يطبّقها على كل عناصر الصفحة الموروثة */

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<style>
  .row input { accent-color: #7c5cff; transform: scale(1.3); margin-inline-end: 6px; }
</style>
<div class="row">
  <label><input type="checkbox" checked /> خيار مفعّل</label><br/>
  <label><input type="radio" name="r" checked /> اختيار أول</label>
  <label><input type="radio" name="r" /> اختيار ثانٍ</label>
</div>

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

أهم القيم

القيمة	الوظيفة
auto	الافتراضي — لون النظام/المتصفح
<color>	أي قيمة لونية صالحة (hex، rgb، اسم لون)
العناصر المتأثرة	checkbox وradio وrange وprogress فقط

💡 نصائح عملية

ضعها على :root لتوحيد لون كل عناصر النموذج بهوية موقعك بسطر واحد
أسرع وأخفّ من إعادة بناء checkbox/radio مخصّص بـ CSS وHTML إضافي

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

توقّع تأثيرها على <select> أو الأزرار العادية — غير مدعوم لهذه العناصر
تجاهل التباين: لون داكن جدًا مع خلفية داكنة يصعّب رؤية حالة التفعيل

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

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