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

Una Kravets
Phần tử select được nâng cấp nhỏ nhưng mạnh mẽ trong Chrome 119, với một tính năng cũng xuất hiện trong Safari 17. Giờ đây, bạn có thể thêm các phần tử <hr> (đường kẻ ngang) vào danh sách các tuỳ chọn đã chọn và 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 tách các tuỳ chọn một cách trực quan nhằm mang lại trải nghiệm tốt hơn cho người dùng.

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

Để thực hiện 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. Để 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 kiểu hoàn toàn cho các thành phần này, hãy tìm hiểu về API cửa sổ bật lên và chú ý đến phần tử selectlist trong tương lai.