استایل فرم (Form Styling) در CSS
«استایل فرم (Form Styling)» با CSS ظاهر ورودی ها، برچسب ها و دکمه ها را بهبود می دهد. بنابراین فرم های خام HTML حرفه ای تر می شوند و تجربه کاربری بهتر می گردد.
شروع سریع استایل دهی فرم
CSS می تواند عرض، فاصله داخلی، حاشیه، رنگ پس زمینه و شعاع گوشه ها را برای ورودی ها تنظیم کند. همچنین می توانید برچسب ها و دکمه ها را نیز یکدست کنید.
تنظیم عرض ورودی ها
با ویژگی width عرض فیلدها را کنترل کنید. برای پرکردن ردیف، مقدار 100٪ منطقی است:
input { width: 100%; }اگر تنها نوعی خاص را می خواهید، از انتخاب گر ویژگی بهره ببرید؛ برای نمونه input[type=text].
پدینگ، مارجین و جعبه بندی
برای نفس کشیدن متن از padding و برای فاصله گذاری عمودی از margin استفاده کنید. سپس با box-sizing: border-box اندازه گیری را قابل پیش بینی کنید:
input[type="text"] { width: 100%; padding: 12px; margin: 10px 0; box-sizing: border-box; }نکته: با border-box جمعِ پدینگ و بردر در عرض نهایی لحاظ می شود و چیدمان پایدارتر است.
بردر و گوشه های گرد
برای برجسته سازی، اندازه و رنگ بردر را تغییر دهید و سپس با border-radius فرم نرم تری بسازید:
input[type="text"] { border: 2px solid red; border-radius: 8px; }اگر تنها خط پایینی را می خواهید، از border-bottom کمک بگیرید:
input[type="text"] { border: none; border-bottom: 1px solid red; }رنگ پس زمینه و رنگ متن
با background-color پس زمینه و با color متن را تنظیم کنید:
input[type="text"] { background-color: #3CBC8D; color: white; }حالت فوکِس، آیکن پس زمینه و انیمیشن عرض
با شبه کلاس :focus واکنش بصری ایجاد کنید. همچنین می توانید آیکن را با تصویر پس زمینه اضافه کنید و سپس با transition عرض را هنگام جستجو انیمیت کنید:
input[type="text"]:focus { background-color: lightblue; }
input.search { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; }
input.animate { transition: width 0.4s ease-in-out; }
input.animate:focus { width: 100%; }هشدار: حذف outline پیش فرض بدون جایگزین مناسب، دسترس پذیری را کاهش می دهد. بنابراین همیشه نشانه فوکِس را حفظ کنید.
استایل دهی تکست اریا و سلکت
برای کنترل ارتفاع، پدینگ و غیرفعال کردن اندازه پذیری، از الگوی زیر استفاده کنید. سپس برای <select> نیز استایل پایه بدهید:
textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; }
select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; }دکمه های فرم و نسخه ریسپانسیو
دکمه های button، submit و reset را یکدست کنید. سپس با media query چیدمان را در موبایل ستونی کنید:
input[type="button"], input[type="submit"], input[type="reset"] { background-color: #04AA6D; border: none; color: white; padding: 16px 32px; margin: 4px 2px; cursor: pointer; }
/* برای تمام عرض شدن: width: 100% */مسیر ادامه
راهنمای استایل فرم را مرور کنید، سپس برای انتخاب دقیق تر ورودی ها به انتخاب گرهای ویژگی سر بزنید و درباره افکت ها در Transitions بخوانید.