چک‌باکس‌ها (<input type="checkbox">) یکی از عناصر مهم در فرم‌های وب هستند، اما ظاهر پیش‌فرض آن‌ها در مرورگرها بسیار ساده و محدود است.

با استفاده از CSS می‌توان چک‌باکس‌ها را سفارشی‌سازی کرد و به آن‌ها ظاهری جذاب‌تر و حرفه‌ای‌تر بخشید. در این راهنما، روش‌های مختلف تغییر استایل چک‌باکس‌ها را بررسی خواهیم کرد.

۱. استایل‌دهی ساده به چک‌باکس

چک‌باکس‌های پیش‌فرض مرورگر را نمی‌توان مستقیماً تغییر داد، اما می‌توان با مخفی کردن چک‌باکس اصلی و ایجاد یک عنصر سفارشی‌شده، استایل آن را تغییر داد.

مثال ساده: تغییر رنگ و ظاهر چک‌باکس

<label class="custom-checkbox">
    <input type="checkbox">
    <span class="checkmark"></span> فعال کردن گزینه
</label>

/* مخفی کردن چک‌باکس پیش‌فرض */
.custom-checkbox input {
    display: none;
}

/* طراحی چک‌باکس سفارشی */
.custom-checkbox {
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
}

.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #007bff;
    border-radius: 4px;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    transition: background-color 0.3s;
}

/* تغییر رنگ هنگام انتخاب شدن */
.custom-checkbox input:checked + .checkmark {
    background-color: #007bff;
    border-color: #0056b3;
}

/* اضافه کردن علامت تیک هنگام انتخاب شدن */
.custom-checkbox input:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

✅ ویژگی‌های این طراحی:

• چک‌باکس اصلی مخفی شده است.
• چک‌باکس جدید با ::after یک علامت تیک دریافت می‌کند.
• هنگام کلیک، رنگ پس‌زمینه تغییر می‌کند.

۲. ساخت چک‌باکس دایره‌ای (شبیه دکمه رادیویی)

می‌توان چک‌باکس را دایره‌ای طراحی کرد تا شبیه دکمه رادیویی (<input type="radio">) شود.

.custom-checkbox .checkmark {
    border-radius: 50%;
}

📌 تغییرات:

• border-radius: 50%; باعث می‌شود که چک‌باکس به شکل دایره نمایش داده شود.

۳. افکت انیمیشن هنگام انتخاب چک‌باکس

با اضافه کردن box-shadow می‌توان هنگام انتخاب شدن، یک افکت زیبا ایجاد کرد.

.custom-checkbox input:checked + .checkmark {
    background-color: #007bff;
    border-color: #0056b3;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

✅ نتیجه: هنگام انتخاب شدن، چک‌باکس با یک افکت نورانی ظاهر می‌شود.

۴. طراحی چک‌باکس با رنگ متحرک (Gradient & Animation)

می‌توان با استفاده از گرادینت رنگی و انیمیشن، ظاهر چک‌باکس را حرفه‌ای‌تر کرد.

.custom-checkbox input:checked + .checkmark {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    border-color: #ff4b2b;
    transition: all 0.3s ease-in-out;
}

📌 ویژگی‌ها:

• هنگام انتخاب شدن، رنگ چک‌باکس به یک گرادینت دو رنگی تغییر می‌کند.
• افکت تغییر رنگ نرم و روان خواهد بود.

۵. تغییر اندازه چک‌باکس

با تغییر مقدار width و height می‌توان اندازه چک‌باکس را کوچک‌تر یا بزرگ‌تر کرد.

.custom-checkbox .checkmark {
    width: 25px;
    height: 25px;
}

✅ نکته: مقدار border-radius را متناسب با اندازه جدید تنظیم کنید.

۶. نتیجه‌گیری

با استفاده از CSS، می‌توان چک‌باکس‌های پیش‌فرض را به چک‌باکس‌های سفارشی، انیمیشنی و زیباتر تبدیل کرد. این کار به بهبود تجربه کاربری و زیبایی طراحی سایت کمک زیادی می‌کند.