شرح صفوف ومحتوى الفقرة
تمنحك ثلاث خصائص حديثة مواءمة فورية لتفاصيل النموذج الدقيقة مع هوية موقعك. أولاها accent-color: #7750b2 التي تلون مربعات الاختيار وأزرار الانتقاء وأشرطة التمرير بسطر واحد دون هدمها وإعادة بنائها! وثانيتها caret-color: #7750b2 التي تلون مؤشر الكتابة النابض داخل الحقول مع إبقاء النص المكتوب داكناً وواضحاً، إلى جانب تنسيق النص الإرشادي عبر ::placeholder.
وعندما يتطلب التصميم مفتاح تبديل مخصصاً على هيئة كبسولة منزلقة، نجمع الخاصية القياسية appearance: none على مربع اختيار حقيقي <input type="checkbox" class="toggle"> مع مقبض دائري عبر ::before ينزلق عند تحقق الحالة .toggle:checked::before بحفاظ كامل على دعم لوحة المفاتيح وبصفر برمجة.
CSS
.brand-check { accent-color: #7750b2; }
.brand-input { caret-color: #7750b2; }
.toggle { appearance: none; width: 44px; height: 24px; border-radius: 999px; }
.toggle:checked { background-color: #7750b2; }
.toggle:checked::before { transform: translateX(20px); }