pseudo-class :checked ของ CSS3

การกำหนดและการใช้งาน

CSS :checked pseudo-class ใช้ตรวจสอบและตรงกับทุกสิ่งที่ถูกเลือก <input> หรือ <option> องค์ประกอบ

นี่ประยุกต์ได้กับ <input type="radio">, <input type="checkbox"> และ <select> ที่มี <option> ในตัวเลือก

ตัวอย่าง

ตัวอย่าง 1

ตั้งลอยนวลแบบแบบเล็กสำหรับทุก <input> ที่ถูกเลือก

input:checked {
  outline: 1px solid red;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งรูปแบบที่แตกต่างกันสำหรับปุ่มเลือกแบบเดียว ตัวเลือกเช็คบอกและตัวเลือกเมื่อถูกเลือก

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

ทดลองด้วยตัวเอง

CSS การเขียน

:checked {
  css declarations;
}

รายละเอียดเทคโนโลยี

การสนับสนุนโปรแกรมน่าเทเวียน

ตัวเลขในตารางระบุวersion แรกที่สนับสนุน pseudo-class ที่สมบูรณ์