شبه کلاس checked: در CSS

:checked Pseudo-class

شبه کلاس checked: در CSS، هر عنصر input که فعال شده باشد را هدف قرار می دهد. این عناصر شامل دکمه ها و چک باکس ها هم می شوند.

در مثال زیر میبینیم که وقتی عنصر به حالت چک شده یا فعال درآید، رنگ آن تغییر یافته و قرمز می شود.

HTML

<form>
  <h4>جنسیت خود را انتخاب کنید:</h4>
  <input type="radio" value="male" id="male" name="gender">
  <label for="male">مرد</label><br>
  <input type="radio" value="woman" id="woman" name="gender">
  <label for="woman">زن</label>
  <h4>رنگهای مورد علاقه خود را انتخاب کنید:</h4>  
  <input type="checkbox" id="red">
  <label for="red">قرمز</label><br>
  <input type="checkbox" id="blue">
  <label for="blue">آبی</label><br>
  <input type="checkbox" id="green">
  <label for="green">سبز</label>
</form>

css

input:checked + label {
   color: red;
}

مشاهده و ویرایش کد بصورت تمام صفحه

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