เลือกองค์ประกอบ: ตอนนี้มีกฎแนวนอน

องค์ประกอบ select ได้รับการอัปเกรดเล็กๆ แต่สำคัญใน Chrome 119 โดยมีฟีเจอร์ที่เปิดตัวใน Safari 17 ด้วย ตอนนี้คุณสามารถเพิ่มองค์ประกอบ <hr> (เส้นแนวนอน) ลงในรายการตัวเลือกที่เลือกได้ ซึ่งจะปรากฏเป็นตัวคั่นเพื่อช่วยแบ่งตัวเลือกต่างๆ อย่างชัดเจนเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น

ภาพหน้าจอก่อนและหลังที่มี hr ในรายการที่เลือก รูปภาพหลังมีเส้นแบ่งระหว่างกลุ่ม

โดยให้เพิ่มองค์ประกอบ <hr> ลงในรายการตัวเลือกดังที่แสดงใน HTML ต่อไปนี้

<label for="major-se>lect"Please selec<t a ma>j<or:>/l<abel br/

select name="majors&quo>t; <id="major->select"
 < option> va<lu>e=&<quot;"Select a> major/opti<on
  hr>
  <option value="arth>"Art< Histor>y/o<ption
  option valu>e="finear<ts">;Fi<ne Arts/option
  o>ption valu<e=">;gd<es"Graphic Desi>gn/op<tion
  >opt<io>n v<alue="lit"Li>terature/option
  opt<ion val>ue=<"music"Music/op>tion
  hr
  option valu<e=">;ae<roeng"Aerospace En>gineering/option
<  optio>n v<alue="biochemeng&>quot;Biochemical Eng<ineerin>g/o<ption
  option value>="civileng"C<ivil En>gin<eering/option
  option> value="compeng&q<uot;Com>p<uter En>gineering/option
  option value="eleng"Electrical Engineering/option
  option value="mecheng"Mechanical Engineering/option
/select

การเปลี่ยนแปลงเล็กๆ น้อยๆ อาจสร้างความแตกต่างให้กับผู้ใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับอนาคตของการควบคุมแบบฟอร์ม รวมถึงวิธีทำให้ควบคุมสไตล์ได้อย่างเต็มที่ได้จาก popover API และคอยติดตามองค์ประกอบ selectlist ในอนาคต