با استفاده از CSS یک فرم ورود ساده طراحی کنید که فیلدهای ورودی (نام کاربری و رمز عبور) دارای استایل‌های حالت عادی، hover و focus، placeholder خوانا، انتقال نرم و نمایش حالت خطا با استفاده از pseudo-classes مانند :focus و :invalid باشند.

فقط با CSS کار کنید: برای استایل‌دهی از selectors مانند input, input:hover, input:focus و ::placeholder استفاده کنید، از transition برای انیمیشن نرم بین حالت‌ها بهره ببرید و برای تمرکز از outline: none همراه با تغییر border-color یا box-shadow استفاده کنید؛ وضعیت خطا را با :invalid و required نشان دهید و با display:flex یا max-width و media queries فرم را واکنش‌گرا نگه دارید. نکات مفید: padding، border-radius و رنگ‌بندی مناسب برای خوانایی و تجربه کاربری بهتر به‌کار ببرید و از :placeholder-shown در صورت نیاز برای مدیریت رفتار placeholder استفاده کنید.