فرمها یکی از مهمترین بخشهای تعامل کاربر با وبسایت هستند. ظاهر سادهی پیشفرض مرورگر معمولاً جذاب نیست، اما با کمی CSS میتوانیم فرمها را حرفهای و کاربرپسند کنیم.
🧱 مرحله اول: استایلدهی به فیلدهای ورودی
برای فیلدهای ایمیل و رمز عبور:
input[type="email"],
input[type="password"] {
width: 100%;
display: block;
box-sizing: border-box;
padding: 0 10px;
height: 40px;
margin-bottom: 15px;
border: 1px solid #cdcdcd;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
🔹 box-sizing: border-box باعث میشود padding و border داخل عرض محاسبه شوند.
🎨 مرحله دوم: استایلدهی به فرم کلی
form {
background-color: #ececec;
padding: 30px 40px;
}
👁️ مرحله سوم: مدیریت لیبلها
لیبلها را حذف نمیکنیم، بلکه مخفی میکنیم تا برای دسترسپذیری باقی بمانند:
.hidden-label {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
✍️ مرحله چهارم: بازخورد بصری هنگام فوکوس
input[type="email"]:focus,
input[type="password"]:focus {
border: 1px solid #869960;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.13);
outline: none; /* حذف حاشیه آبی کروم */
}
🟢 مرحله پنجم: استایلدهی به دکمهی ورود
input[type="submit"] {
width: 100%;
display: block;
box-sizing: border-box;
background-color: #869960;
color: white;
padding: 10px 0;
border: 1px solid #27ae60;
border-radius: 3px;
font-family: Tahoma, sans-serif;
font-size: 100%;
margin-bottom: 10px;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #798A56;
border: 1px solid #535e3b;
}
🔽 مرحله ششم: استایلدهی به Select
select {
width: 100%;
display: block;
box-sizing: border-box;
font-family: Tahoma, sans-serif;
font-size: 100%;
-webkit-appearance: none;
appearance: none;
}
🔘 مرحله هفتم: استایلدهی به چکباکس «مرا به خاطر بسپار»
.checkbox-text {
font-size: 85%;
color: #777;
}
🎯 جمعبندی
- فیلدها را با width: 100% و box-sizing: border-box واکنشگرا کردیم.
- فرم کلی پسزمینه و padding گرفت.
- لیبلها را مخفی کردیم بدون حذف کامل.
- بازخورد بصری هنگام فوکوس اضافه شد.
- دکمهی ورود به یک دکمهی سبز زیبا تبدیل شد.
- select و checkbox هم استایل گرفتند.