องค์ประกอบ select ได้รับการอัปเกรดเล็กๆ แต่สำคัญใน Chrome 119 โดยมีฟีเจอร์ที่เปิดตัวใน Safari 17 ด้วย ตอนนี้คุณสามารถเพิ่มองค์ประกอบ
<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>g
ineering/option
option value="eleng"Electrical Engineering/option
option value="mecheng"Mechanical Engineering/option
/select
การเปลี่ยนแปลงเล็กๆ น้อยๆ อาจสร้างความแตกต่างให้กับผู้ใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับอนาคตของการควบคุมแบบฟอร์ม รวมถึงวิธีทำให้ควบคุมสไตล์ได้อย่างเต็มที่ได้จาก popover API และคอยติดตามองค์ประกอบ selectlist ในอนาคต