พีซูโดคลาส checked

พีซูโดคลาส checked ช่วยให้จับ ช่องทำเครื่องหมาย หรือ radio ที่ถูกเลือกได้

น่าเสียดายที่ไม่สามารถกำหนดสไตล์เพื่อตกแต่งพวกมันได้ เช่น ไม่สามารถกำหนด พื้นหลัง หรือ สีของเส้นขอบ ได้ (สามารถกำหนด เช่น ความกว้างและความสูงได้ แต่พวกมันจะไม่ส่งผลอย่างที่คาดหวัง)

แม้กระนั้นก็สามารถกำหนดสไตล์สำหรับองค์ประกอบที่อยู่ติดกันได้ ตัวอย่างเช่น: input:checked + p - เราจะกำหนดสไตล์สำหรับย่อหน้าที่อยู่ ตรงใต้อินพุตที่ถูกเลือก

ไวยากรณ์

cssองค์ประกอบ:checked {
  
}

ตัวอย่าง

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

html<input type="checkbox" id="elem1">
<label for="elem1">ป้ายกำกับ 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">ป้ายกำกับ 2</label>

cssinput:checked + label {
  color: red;
}

Результат:

ตัวอย่าง

ลองเลือก radio แล้วคุณจะเห็นว่า ป้ายกำกับ label ที่อยู่ ถัดจากตัวเลือกที่ถูกเลือกโดยตรง จะเปลี่ยนเป็นสีแดง:

html<input type="radio" name="elem" id="elem1">
<label for="elem1">ป้ายกำกับ 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">ป้ายกำกับ 2</label>

cssinput:checked + label {
  color: red;
}

Результат: