checked:

checked یک pseudo-class می باشد که حالت فعال عناصری مثل چکباکس () و رادیو () را بیان می کند و با استفاده از آن ما می توانیم استایل خاصی برای این عناصر در حالت فعالشان در نظر بگیریم. این انتخابگر همینطور بر روی گزینه های داخل تگ select که option نام دارند هم اعمال می شود.

از آنجایی که استایلی بر روی خود عناصر چکباکس و رادیو اعمال نمی شود معمولا استایل ها را بر روی عناصر labelشان اعمال می کنیم. که البته انجام این کار نیازمند دانش بیشتری در زمینه انتخابگرها می باشد.

مثلا فرض کنید در HTML داریم:


<input type="checkbox" id="test">
<label for="test">غیر ممکن</label>

 

حال می توان در CSS نوشت:


input[type = "checkbox"]:checked + label {
  color: red;
  text-decoration: line-through;
}

این کد در CSS بیان می کند زمانی که عنصر input که از نوع checkbox می باشد فعال (checked) شد عنصر برچسب (label) که بلافاصله بعد (+) از آن input آمده است را انتخاب کن و رنگش را قرمز کن و روی آن خط بکش.

 

See the Pen EjOLmg by Mojtaba Seyedi (@seyedi) on CodePen.

 

به همین ترتیب می توان از checked: برای عناصر دیگر هم که این قابلیت فعال شدن را دارند استفاده کرد:


input[type="checkbox"]:checked {

}

input[type="radio"]:checked {

}

option:checked {

}

پشتیبانی مرورگرها

checked: در مرورگرهای کروم, فایرفاکس, اپرا +9 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *