تم‌گذاری واسط کاربر تولیدشده توسط مرورگر

اکثر میاناهای کاربر تولیدشده توسط مرورگر را می‌توان تا حدودی بااستفاده از CSS سفارشی‌سازی کرد. حتی اگر به ویژگی‌های نو نیاز داشته باشد، در مرورگرهای قدیمی‌تر به‌خوبی تنزل می‌کند و بنابراین اغلب به شبیه‌ساز مرورگر یا بازگشت نیاز ندارد.

قبل‌از بازآفرینی واسط کاربر مرورگر (کنترل‌های فرم، نوارهای پیمایش، انتخاب‌ها، پیام‌های خطا، و غیره)، ابتدا بررسی کنید که:

1. رابط کاربری مرورگر را نمی‌توان به‌اندازه کافی برای نیازهای شما سفارشی‌سازی کرد، حتی با CSS مدرن،
2. سفارشی‌سازی موردنظر به‌اندازه کافی مهم باشد که توجیه‌کننده معاوضه‌های بازآفرینی واسط کاربر داخلی باشد — به‌ویژه ازدست دادن معناشناسی دسترس‌پذیر، مدیریت صفحه‌کلید، IME، و ادغام AT که واسط کاربر بومی به‌طور رایگان ارائه می‌دهد.

نمونه سفارشی‌سازی‌هایی که امکان‌پذیر است:

• از ::selection برای سفارشی‌سازی رنگ‌های نوشتار برجسته‌شده استفاده کنید.
• نباید user-select: none را روی نوشتار محتوا اعمال کنید — کپی-جای‌گذاری، ابزارهای ترجمه، و اشاره‌های «خواندن از اینجا» در فناوری کمکی را خراب می‌کند. آن را به chrome (دستگیره‌های کشیدن، نوارابزارها، برچسب‌های دکمه زائد) محدود کنید.
• از accent-color برای اعمال رنگ تأکیدی صفحه به هر واسط کاربری تولیدشده توسط مرورگر استفاده کنید.
• از color-scheme استفاده کنید تا واسط کاربر مرورگر با حالت روشن/تاریک سازگار شود.
• از scrollbar-color برای سفارشی‌سازی رنگ‌های نوار پیمایش و از scrollbar-width برای کنترل ضخامت نوار پیمایش استفاده کنید — زبانه را به‌طور واضح از مسیر متمایز نگه دارید (≥۳:۱)، و scrollbar-width: none را روی مناطق پیمایش‌پذیر تنظیم نکنید (فقط زمانی از آن استفاده کنید که پیمایش کاملاً با امکان دیگری جایگزین شده باشد).
• از :user-invalid / :user-valid برای سبک‌بندی اعتبار استفاده کنید، نه :invalid / :valid — این‌ها فقط پس‌از تعامل کاربر با فیلد مطابقت دارند و از پیش‌فرض نامطلوب پرچم‌گذاری فیلدهای خالی الزامی به‌عنوان خطا در بارگیری صفحه جلوگیری می‌کنند. هنگام هدف‌یابی گسترده input (مثلاً input:not(input[type="range"]):user-valid)، لغزنده‌های محدوده را مستثنی کنید تا تنظیم لغزنده باعث اعمال حاشیه‌ها یا پس‌زمینه‌های اعتبار فیلد به آن نشود.
• دکمه‌ها و فیلدهای نوشتاری (ازجمله <textarea>) معمولاً می‌توانند به‌عنوان عناصر عادی سبک‌بندی شوند.
• از font-size برای مقیاس‌بندی و از دیگر ویژگی‌های نوشتاری برای کنترل تایپوگرافی استفاده کنید

سبک‌بندی فیلدهای نوشتاری (<input> و <textarea>)

برای اکثر اهداف سبک‌بندی (مثلاً رنگ‌ها، حاشیه‌ها، پس‌زمینه‌ها، تایپوگرافی، و غیره) با این عناصر به‌عنوان محفظه‌های نوشتار معمولی رفتار کنید.

• برای سبک‌دهی به جای‌بان‌های ورودی، از :placeholder-shown و ::placeholder استفاده کنید.
• برای تغییر اندازه فیلدهای نوشتاری براساس محتوا، از field-sizing: content استفاده کنید.
• برای عناصر <textarea>، از resize: vertical برای غیرفعال کردن تغییر اندازه افقی یا resize: none برای غیرفعال کردن همه تغییر اندازه‌ها استفاده کنید.

کنترل‌های چندگزینه‌ای (انتخاب، دکمه‌های رادیویی، چارگوش‌های انتخاب)

• برای انتخاب یکی از گزینه‌های متعدد ارائه‌شده در منو کرکره‌ای: از <select> + appearance: base-select + ::picker(select) استفاده کنید. برای اطلاعات بیشتر، به سبک‌بندی انتخاب نمانام‌دار مراجعه کنید
• انتخاب یک یا چند گزینه از میان گزینه‌های متعدد که به‌صورت درون‌خطی در صفحه چیده شده‌اند: برای هر گزینه، از <input type=checkbox> یا <input type=radio> در داخل <label> استفاده کنید. سبک ازطریق label:has(:checked).
• سبک‌بندی چارگوش‌های انتخاب، دکمه‌های رادیویی، و کلیدها ازطریق appearance: none + محتوای تولیدشده (::before/::after) یا تصاویر پس‌زمینه برای ترسیم وضعیت انتخاب‌شده.

<input>های غیرنوشتاری (دکمه‌ها، لغزنده‌ها، ورودی‌های فایل، و غیره)

• ورودی‌های فایل: از ::file-selector-button برای سبک‌دهی به دکمه استفاده کنید.
• از <input> با type button، submit، یا reset استفاده نکنید. درعوض از <button> استفاده کنید و آن را به‌عنوان عنصر معمولی سبک‌بندی کنید.
• لغزنده‌ها: برای کنترل دقیق‌تر، از شبه‌عناصر appearance: none + thumb (‏::-webkit-slider-thumb،‏ ::-moz-range-thumb، و غیره) و شبه‌عناصر track (‏::-webkit-slider-runnable-track،‏ ::-moz-range-track، و غیره) استفاده کنید.