CSS: คลาสหลอกที่เลือกคล้ายกับ: ตรวจสอบ แต่สำหรับองค์ประกอบ <select>

มีวิธีจัดรูปแบบ<option>องค์ประกอบที่เลือกในปัจจุบันใน<select>องค์ประกอบหรือไม่

จากนั้นฉันสามารถให้สีพื้นหลังกับองค์ประกอบตัวเลือกที่เลือกในปัจจุบันได้หรือไม่? ด้วยวิธีนี้ฉันสามารถจัดรูปแบบตัวเลือกที่สามารถดูได้ในเมนูแบบเลื่อนลงแบบปิด

:checkedหลอกชั้นแรกใช้กับองค์ประกอบต่างๆที่มี HTML4 selectedและcheckedคุณลักษณะ

ที่มา: w3.org

ดังนั้น CSS นี้จึงใช้งานได้แม้ว่าการจัดรูปแบบcolorจะไม่สามารถทำได้ในทุกเบราว์เซอร์:

option:checked { color: red; }

ตัวอย่างของการดำเนินการนี้ซ่อนรายการที่เลือกในปัจจุบันจากรายการแบบเลื่อนลง

option:checked { display:none; }

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

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

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */

จริงๆแล้วคุณสามารถจัดสไตล์คุณสมบัติ CSS ได้เพียงไม่กี่อย่างใน:องค์ประกอบตัวเลือกที่ แก้ไข colorใช้ไม่ได้background-colorเช่นกัน แต่คุณสามารถตั้งค่าไฟล์background-image.

คุณสามารถจับคู่สิ่งนี้ด้วยการไล่ระดับสีเพื่อทำเคล็ดลับ

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

ทำงานบน gecko / webkit

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}