select 요소는 Chrome 119에서 작지만 강력한 업그레이드를 거치며 Safari 17에도 포함된 기능이 있습니다. 이제 선택 옵션 목록에
<hr>
(가로 규칙) 요소를 추가할 수 있습니다. 이 요소는 구분자로 표시되어 옵션을 시각적으로 구분하여 더 나은 사용자 환경을 제공합니다.
이렇게 하려면 다음 HTML과 같이 <hr>
요소를 옵션 목록에 추가합니다.
<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>
작은 변화로도 사용자에게 큰 변화를 줄 수 있습니다. 완벽한 스타일 지정 방법 등 양식 컨트롤의 향후 기능에 관한 자세한 내용을 알아보려면 popover API에 관해 알아보고 향후 selectlist 요소에 주목하세요.