cssblog.ir logo

همانطور که می دانید در حال حاضر روشی رسمی برای customize کردن چک‌باکس ها و دکمه های رادیویی (radio buttons) در زبان CSS وجود ندارد و اغلب روش ها از ترفندهایی برای انجام این کار استفاده می کنند. روشی که در ادامه قصد بیان آن را دارم، بنظرم بهترین روش موجود برای انجام این کار است چراکه نیازی به جاوا اسکریپت ندارد و همه چیز از طریق ویژگی‌های رسمی و عادی مرورگرها انجام می شود. پیشنهاد می کنم که فرصت یادگیری ساخت این چک باکس ها را از دست ندهید.

مواردی وجود دارند که بهتر است قبل از ساخت چک‌باکس آن ها را بدانیم و سپس کار را شروع کنیم چراکه در ساخت چک باکس از این ویژگی ها استفاده می شود.

۱- نقش خصلت for روی تگ لیبل (label)

در زبان HTML یکی از خصلت یا همان Attribute هایی که می توانیم برای label ها تعیین کنیم، خصلت for می باشد. این خصلت بیان می کند که این لیبل به کدام فیلد ورودی (input) تعلق دارد. به همین جهت از آنجائیکه هر لیبل فقط با یک فیلد ورودی می تواند ارتباط داشته باشد، مقداری که برای خصلت for نوشته می شود، آیدی فیلد ورودی موردنظر خواهد بود. برای مثال: 

در نظر داشته باشید که استفاده از این خصلت باعث می شود که هنگام کلیک روی لیبل، مرورگر بصورت خودکار روی فیلد مربوط به آن focus کند و اگر فیلد مربوط به آن یک چک‌باکس یا دکمه رادیویی باشد، آن فیلد انتخاب می شود (تیک می‌خورد). برای مثال: 

۲- علامت + (بعلاوه) در سلکتورهای CSS

علامت + که در مطلب مربوط به آن نیز درباره اش صحبت نموده ام، یک ترکیب کننده سلکتور می باشد. به این معنی که در دو سمت این علامت، سلکتورها قرار می گیرند. مانند:

label + input {
}

معنی این علامت این است که سلکتوری که پس از علامت + می آید، (در اینجا input) از لحاظ ترتیب در HTML می بایست دقیقا پس از سلکتور سمت چپ (در اینجا label) قرار گرفته باشد. برای مثال سلکتور فوق، با این HTML سازگار است و عنصر input با سلکتور match می شود:

<div>
	<label>Checkbox label</label>
	<input type="checkbox">
</div>

اما با این HTML سازگار نیست و input انتخاب نمی شود:

<div>
	<input type="checkbox">
	<label>Checkbox label</label>
</div>

پس عملکرد این علامت را در ذهن داشته باشید تا در ادامه از آن استفاده کنیم.

نحوه ساخت چک‌باکس

روند ساخت چک باکس ها، به شرح زیر می باشد. ابتدا HTML زیر را در صفحه قرار می دهیم:

<div class="checkbox">
	<input type="checkbox" id="checkbox-1">
	<label for="checkbox-1">
		<span class="box"></span>
		چک باکس اول
	</label>
</div>

۲- استایل های پایه ای زیر را برای کلاس .checkbox در نظر می گیریم:

.checkbox {
	font-size: 16px;
	display: inline-block;
	position: relative;
}

دلیل استفاده از font-size این است که می خواهیم از واحد em برای بیان اندازه‌ها استفاده کنیم تا پیاده سازی به نوعی باشد که با افزایش سایز فونت، سایز چک‌باکس نیز تغییر کند. 

۳- سپس با نوشتن استایل زیر، کاری می کنیم که عنصر input قابل رویت نباشد.

.checkbox label {
    position: relative;
}

.checkbox input {
    position: absolute;
    visibility: hidden;
}

۴- مربع بیرونی چک‌باکس (همان مربعی که در حالت تیک نخورده مشاهده می شود) را از طریق استایل زیر بوجود می‌آوریم:

.checkbox .box {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #dad6e6;
    width: 1em;
    height: 1em;
    position: relative;
}

۵- در هنگام تیک خوردن input، در وضعیت :checkedقرار خواهد گرفت. به همین دلیل می توانیم بگویم، لیبلی که پس از input تیک خورده قرار دارد و سپس .box داخل لیبل را انتخاب کنیم. 

.checkbox input:checked+label .box:after {
    content: ' ';
    position: absolute;
    right: 15%;
    top: 15%;
    width: 70%;
    height: 70%;
    background: #a57dbf;
}

کد کامل به شرح زیر خواهد بود: 

دلیل استفاده از تگ span اضافه

لازم به ذکر است که برخی از روش هایی که در سطح اینترنت موجود است، کاملا با استفاده از :before و :after انجام شده اند. اما طبق تست هایی که من در حالت های مختلف انجام دادم، بنظر می‌رسد که آن روشها در هنگام زوم صفحه یا تغییر سایز فونت کمی بهم ریختگی دارند و گاها درست نمایش داده نمی‌شود. به همین در روش فوق بنده از یک تگ span اضافه که در داخل لیبل قرار گرفته است استفاده نمودم تا مطمئن شوم که هنگامی که چک‌باکس تیک می خورد، فضایی که می بایست تغییر کند به درستی موقعیت دهی می‌شود و حتما در مرکز چک‌باکس قرار می گیرد.

نحوه ساخت دکمه های رادیویی

برای ساخت دکمه های رادیویی نیز دقیقا مانند چک باکس ها عمل خواهیم نمود. با این تفاوت کهinput از نوعradio خواهد بود و نامی مانند .radio را برای کلاس اصلی انتخاب می کنیم. مانند:

ایرادهای این روش

در نهایت لازم است تا به برخی از ایرادهای این روش نیز اشاره کنیم.

۱- نیاز به تعیین id برای چک باکس

ایراد اول بنظر می رسد که نیاز به استفاده از id برایinput ها باشد که گاها ممکن است نوعی کار اضافی تلقی شود یا برنامه نویسی سمت سرور وبسایت را تحت تاثیر قرار دهد.

۲- تحت تاثیر قراردادن HTML

همانطور که مشاهده نمودید این روش از دو جهت HTML را نیز تحت تاثیر قرار می دهد. نیاز به قرار گرفتن الزامیlabel پس ازinput و قرار گرفتن یک تگspan اضافه در داخلlabel که ممکن است نیازمندی به این ساختار مشخص HTML در برخی فریم‌ورک ها و تکنولوژی های سمت سرور مشکل ایجاد نماید.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند