Chọn phần tử: hiện đã áp dụng các quy tắc ngang

Phần tử lựa chọn này sẽ có một bản nâng cấp nhỏ nhưng mạnh mẽ trong Chrome 119, với một tính năng cũng đã có trong Safari 17. Giờ đây, bạn có thể thêm các phần tử <hr> (quy tắc ngang) vào danh sách lựa chọn. Các phần tử này sẽ xuất hiện dưới dạng dòng phân cách để giúp phân chia các lựa chọn một cách trực quan nhằm mang lại trải nghiệm người dùng tốt hơn.

Để làm việc này, hãy thêm các phần tử <hr> vào danh sách tuỳ chọn như trong HTML sau:

<label for="major-select">Please select a major:</label> <br/>

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <option value="arth">Art History</option>
  <option value="finearts">Fine Arts</option>
  <option value="gdes">Graphic Design</option>
  <option value="lit">Literature</option>
  <option value="music">Music</option>
  <hr>
  <option value="aeroeng">Aerospace Engineering</option>
  <option value="biochemeng">Biochemical Engineering</option>
  <option value="civileng">Civil Engineering</option>
  <option value="compeng">Computer Engineering</option>
  <option value="eleng">Electrical Engineering</option>
  <option value="mecheng">Mechanical Engineering</option>
</select>

Những thay đổi nhỏ có thể tạo ra sự khác biệt cho người dùng của bạn. Để biết thêm thông tin về tương lai của các thành phần điều khiển biểu mẫu, bao gồm cả cách tạo các thành phần này có thể tạo kiểu đầy đủ, hãy tìm hiểu về API cửa sổ bật lên và theo dõi phần tử danh sách chọn lọc trong tương lai.