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

Phần tử được chọn có một bản nâng cấp nhỏ nhưng hiệu quả 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 theo chiều ngang) vào danh sách các tuỳ chọn được chọn và các phần tử này sẽ xuất hiện dưới dạng dấu phân tách để giúp chia nhỏ các tuỳ 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.

Ảnh chụp màn hình trước và sau khi chọn giờ. Hình ảnh sau có đường phân cách giữa các nhóm.

Để làm được việc này, hãy thêm các phần tử <hr> vào danh sách tuỳ chọn như minh hoạ 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>

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