چگونه به چک باکس توسط CSS3 استایل بدهیم

همان طور که می دانید استایل دهی به چک باکس ها و دکمه های رادیویی توسط CSS بسیار محدود و در بعضی شرایط غیر ممکن می باشد. مخصوصا اگر قصد داشته باشید یک فرم با طراحی حرفه ای و فانتزی بسازید، CSS مشخصه خاصی را برای طراحی واستایل دهی به این عناصر فرم را در اختیار شما نمی گذارد. پس بایستی خودتان دست به کار شده و با تکنیک ها و قابلیتهای فوق العاده CSS3 این عناصر را استایل دهی کنید. 
در این حالت از آموزش قصد داریم تا یک چک باکس با دسته متحرک ایجاد کنیم. هنگامی که روی چک باکس کلیک می شود و به حالت تیک خورده یا فعال تغییر می کند، دسته متحرک به سمت راست حرکت کرده و رنگ چک باکس از رنگ طوسی به رنگ سبز تغییر کند. 
پس ابتدا دو <label> ایجاد می کنیم و کلاس myCheck را برای آن انتخاب کرده، یک عنصر <input> از نوع چک باکس نیز داخل آن ایجاد می کنیم و سپس یک تگ <span> با کلاس handle جهت ساخت دستگیره نیز داخل <lebel> می نویسیم.

<label class="myCheck">
   <input type="checkbox">
   <span class="handle"></span>
</label>
<label class="myCheck">
   <input type="checkbox">
   <span class="handle"></span>
</label>

حال کلاس myCheck را به صورت زیر استایل دهی می کنیم

.myCheck {
            position: relative;
            display: inline-block;
            width: 70px;
            height: 40px;
        }

توجه داشته باشید مقدار position برای کلاس myChek را برابر relative قرار دادیم تا بتوانیم عناصر آن را به مقدار absolute برای خصوصیت position انتخاب کنیم.
کلاس handle را نیز اینگونه استایل دهی می کنیم

.handle {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: #c9cacb;
            cursor: pointer;
            transition: .5s;
        }

حال تعیین می کنیم که هر بار روی checkbox کلیک شد و به حالت checked تغییر کرد، رنگ پیش زمینه به رنگ سبز تغییر کند. این روند با transition به مدت .5 ثانیه تغییر می کند. 

.myCheck input:checked + .handle {
            background: #36cf22;
        }

و حالا نوبت به طراحی دستگیره چک باکس می رسد. قصد داریم یک مربع کوچک در سمت چپ ایجاد کنیم. این کار را با خصوصیت before برای کلاس handle انجام می دهیم. 

.handle:before {
            content: "";
            position: absolute;
            top: 7px;
            left: 5px;
            width: 25px;
            height: 25px;
            background: #FFFFFF;
            transition: .5s;
        }

و حالا کافیه تا هنگامی که چک باکس به حالت checked تغییر می کند، مربع سفید که به عنوان دستگیره تعیین شده است روی محور x ها به سمت راست حرکت کند.
 

.myCheck input:checked + .handle:before {
            transform: translateX(30px);
        }