요소 선택: 가로 규칙 추가

Una Kravets

선택 요소는 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>

사소한 변경만으로도 사용자에게 도움이 될 수 있습니다. 양식 컨트롤을 완전히 스타일을 지정할 수 있는 방법 등 향후 양식 컨트롤에 대한 자세한 내용은 팝오버 API를 알아보고 향후 selectlist 요소를 눈여겨보시기 바랍니다.