Etc / / 2024. 3. 8. 16:57

[HTML]select 태그에서 option 길이 조절하기

728x90

<select>

   <option>option 1</option>

</select>

위와 같은 태그가 있습니다. option의 경우 50까지 있다고 가정을 합니다.

  • 크롬, 엣지, 웨일의 경우 기본적으로 20개가 펼쳐집니다. 이 세 가지 브라우저는 브라우저 자체 크기(높이)를 줄이면 브라우저의 높이를 뚫고 20개를 기어이 표시해 버립니다(아래 이미지, 크롬).
  • 위 세 가지와 다르게 파이어폭스(이하 파폭)에서는 현재 브라우저 높이에 맞는 화면에 맞춰서 늘어납니다. 이 늘어나는 게 위 세 브라우저는 개수지만 파폭은 px인 것 같습니다.

검색을 해보니 이 개수를 지정할 수 있는 방법이 있었습니다. 편법인 듯합니다.

<select onfocus="this.size=10;" onblur="this.size=1;" onchange="this.size=1; this.blur();">

[sample]

반응형