آموزش سلکتور checked: در css

در سلسله مقالات آموزشی سلکتورهای css در خانواده سلکتورهایی که بصورت : ویا :: بودند ، اکنون به یکی از انتخاب کننده‌های بسیار کاربردی رسیدیم که در طراحی سایت توسط زبان css اهمیت بسیار بالایی دارد . این انتخاب کننده checked نام دارد و بروی تمامی مرورگرها پشتیبانی شده و می‌توانید با خیال راحت از آن استفاده کنید .

ویژگی checked چه زمانی در سایت استفاده می‌شود ؟

ویژگی checked در المان‌های فرم و در قسمتی که از checkbox یا radio استفاده شده است مشخص می‌شود . ویژگی های checkbox یا radio به شکل زیر در فرم استفاده می‌شوند :

<input type="checkbox">
<input type="radio">

مطمئنا تمامی شما برای یکبار هم که شده از این نوع ورودی ها در فرم های خودتان استفاده کرده‌اید اما شاید کمتر به این موضوع فکر کرده باشید که چگونه کاری کنیم که وقتی روی هریک از این المان های کلیک شد یا به اصطلاح ، input مدنظر چک شد و تیک خورد ، برخی کارها انجام شود .

مثلا برای ساخت دکمه‌هایی که بصورت سوئیچی هستند و با کلیک روی آنها ، یک اسلایدر ریز به حرکت درآمده و به چپ و راست حرکت می‌کند ، این ویژگی بسیار بدردبخور است . یک نمونه از طراحی این دکمه ها را می‌توانید در فرم ورود به حساب کاربری خودتان داخل سئونود مشاهده کنید .

تصور کنید که قصد داریم وقتی روی یک چک باکس کلیک شد ، استایل خاصی روی آن اعمال شود ، پس باید ویژگی checked آن را توسط css کنترل کنیم . یک نمونه از این کد می‌تواند به شکل زیر باشد :

input [type='checkbox']:checked {
  border: none;
  outline: 2px solid #515151;
}

در این کد روی تمامی input هایی که از نوع checkbox هستند ، به هنگام چک شدن یا به عبارتی انتخاب شدن توسط کاربر ، یک استایل ریز اعمال کردیم . استایل نویسی برای input هایی که از نوع checkbox یا radio هستند باید بسیار هوشمندانه و با رعایت اصول انجام شود .

برای اینکه یک استایل جذاب به input های خودتان که از دو نوع بالا هستند اعمل کنید باید ویژگی checked را با after و before ها ترکیب کرده و یک دیزاین جذاب بسازید . همانطور که گفته شد یک نمونه از این طراحی جذاب که با ترکیب after و before و حالت checked طراحی شده است صفحه ورود در سئو نود است که به شکل زیر است :

به دکمه ” به خاطر بسپار ” در داخل فرم توجه کنید . در این حالت ابتدا توسط دستورات after و before استایل خاصی به این input که از نوع checkbox است داده شده و سپس زمانی که این input توسط کاربر انتخاب شده ( کلیک شد ) و چک شده است ، استایل آن را مجدد توسط after و before تغییر دادیم . یک نمونه کد html برای این مثال به شکل زیر است :

<input type="checkbox" name="rmb" id="rmb" >
<label for="rmb">Remember Me</label>

و نهایتا کد css نیز برای این بخش یا اصطلاحا دکمه به شکل زیر نوشته شده است :

.Panel_FormBox label {
    cursor: pointer;
    padding-left: 60px;
    font-size: 14px;
    top: -15px;
}
.Panel_FormBox input[type=checkbox] {
    opacity: 0;
    width: 0;
    height: 0;
}
.Panel_FormBox label::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 20px;
    top: 2px;
    left: 0;
    background-color: #ddd;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 4px;
}
.Panel_FormBox label::after {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    top: 5px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 4px;
}
.Panel_FormBox input:checked+label::before {
    background-color: #e91e63;
}
.Panel_FormBox input:checked+label::after {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

البته این کد صرفا یک مثال ساده از طراحی input هایی از نوع checkbox است که به کمک تغییر حالت در checkbox و همچنین after و before ایجاد شده است .

این ویژگی هم برای input از نوع checkbox و هم برای input از نوع radio کاربردی است و برای انتخاب شدن هردوی این input ها توسط کاربر سایت می‌توانید دقیقا همین استایل نویسی را انجام دهید .

توجه داشته باشید که اگر در زمینه طراحی سایت توسط زبان css فعال هستید حتما اطلاع دارید که این زبان تنها زبان اصلی برای طراحی قالب سایت شما است و از این جهت لازم است تا به تمامی سلکتورهای این زبان آشنایی داشته باشید .

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