مقدمه
با سلام و درود خدمت شما دوستان و علاقه مندان به آموزش های ویژه از سری آموزش های برنامه نویسی و طراحی وب . من علیرضا حاتمی نیا هستم و در این آموزش با نحوه ساخت چک باکس با دسته متحرک توسط CSS3 در خدمت شما هستم.
نحوه استایل دهی به چک باکس توسط 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); }
