พีซูโดคลาส checked
พีซูโดคลาส checked ช่วยให้จับ
ช่องทำเครื่องหมาย
หรือ radio ที่ถูกเลือกได้
น่าเสียดายที่ไม่สามารถกำหนดสไตล์เพื่อตกแต่งพวกมันได้ เช่น ไม่สามารถกำหนด พื้นหลัง หรือ สีของเส้นขอบ ได้ (สามารถกำหนด เช่น ความกว้างและความสูงได้ แต่พวกมันจะไม่ส่งผลอย่างที่คาดหวัง)
แม้กระนั้นก็สามารถกำหนดสไตล์สำหรับองค์ประกอบที่อยู่ติดกันได้
ตัวอย่างเช่น: input:checked + p
- เราจะกำหนดสไตล์สำหรับย่อหน้าที่อยู่
ตรงใต้อินพุตที่ถูกเลือก
ไวยากรณ์
องค์ประกอบ:checked {
}
ตัวอย่าง
ลองทำเครื่องหมายในช่องทำเครื่องหมายแล้วคุณจะเห็นว่า
ป้ายกำกับ label
ที่อยู่ถัดจากช่องทำเครื่องหมายที่ถูกเลือกโดยตรง
จะเปลี่ยนเป็นสีแดง:
<input type="checkbox" id="elem1">
<label for="elem1">ป้ายกำกับ 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">ป้ายกำกับ 2</label>
input:checked + label {
color: red;
}
:
ตัวอย่าง
ลองเลือก radio แล้วคุณจะเห็นว่า
ป้ายกำกับ label ที่อยู่
ถัดจากตัวเลือกที่ถูกเลือกโดยตรง
จะเปลี่ยนเป็นสีแดง:
<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>
input:checked + label {
color: red;
}
:
