내가 만들 필요가 어떻게 <select> 태그

Question

에있는 모든 옵션을 볼 수 있도록하는 긴 (> 20 개 옵션) HTML에서 드롭 다운 목록, 그래서 나는 <가 > 태그를 선택 사용한다. 하지만 20 개가 넘는 항목에서 Firefox가 스크롤바를 추가하고 모든 옵션을 표시하려고합니다. 나는 오버 플로우 속성을 가지고 놀려고했으나 작동하지 않습니다.

Javascript에 항복하기 전에 간단한 HTML/CSS 솔루션을 사용 하시겠습니까?

(참고 : 크기 = "N"를 <의 속성은 드롭 다운 목록을하지 않습니다 > 태그를 선택, 그것은 N 옵션을 볼 수 모든 시간한다 : 내가 원하지 무엇을)

Answer 1

스크롤 막대를 사용하기 전에 표시 할 옵션의 수를 브라우저에 알리는 방법이 없습니다. HTML과 CSS는 이것에 관한 어떤 것도 가지고 있지 않습니다.

정말로의 경우이 동작을 원할 경우 목록을 표시하는 자체 팝업을 구현해야합니다.

Answer 2

이 크로스 브라우저를 수행 할 수 없으므로 custom dropdown을 만들어야합니다.

Answer 3

브라우저 측에서 처리되므로 많은 작업을 수행 할 수 없습니다.

한 가지 해결책은 jquery 플러그인을 사용하여 선택 입력 (예 : http://finalevillee.googlepages.com/jqueryplugin%3Acustomselect)을 사용자 정의 할 수있게하는 것입니다. 이 방법으로 당신은 그것이 어떻게 표시되는지 완전히 통제 할 수 있습니다.

주요한 단점은 기본 모양과 느낌이 없다는 것입니다.

Answer 4

우리는이 항목을 순수하게 CSS로 구현하는 방법을 찾았지만 자바 스크립트를 기반으로합니다.

사상의 중앙면은 적절한 위치를 보장 인수를 핵심 구성 요소는 CSS 위치 인 다른 형제

충돌을 피하기 변환하는 것도 있었다

Based on this answer

<style> 
    SELECT { 
     display: inline-block; 
     position: fixed; 
     transform: translate(0%, 0%); 
     width: 200px; 
    } 
</style> 

<script> 
    function selectselect(element) 
    { 
     element.size = element.options.length; 
     element.style.zIndex = "500"; 

    } 

    function selecthide(element) 
    { 
     element.size = 0; 
     element.style = ""; 
    } 

</script> 


<ul> 
    <li> 
    <select name="select1" onmousedown="selectselect(this)" onchange="selecthide(this)" onblur="selecthide(this)"> 
     <option value="1">This is select number 1</option> 
     <option value="2">This is select number 2</option> 
     <option value="3">This is select number 3</option> 
     <option value="4">This is select number 4</option> 
     <option value="5">This is select number 5</option> 
     <option value="6">This is select number 6</option> 
     <option value="7">This is select number 7</option> 
     <option value="8">This is select number 8</option> 
     <option value="9">This is select number 9</option> 
     <option value="10">This is select number 10</option> 
     <option value="11">This is select number 11</option> 
     <option value="12">This is select number 12</option> 
     <option value="13">This is select number 13</option> 
     <option value="14">This is select number 14</option> 
     <option value="15">This is select number 15</option> 
     <option value="16">This is select number 16</option> 
     <option value="17">This is select number 17</option> 
     <option value="18">This is select number 18</option> 
     <option value="19">This is select number 19</option> 
     <option value="20">This is select number 20</option> 
     <option value="21">This is select number 21</option> 
     <option value="22">This is select number 22</option> 
     <option value="23">This is select number 23</option> 
     <option value="24">This is select number 24</option> 
    </select> 
    </li> 
    <li> 

     <select name="select1" onmousedown="selectselect(this)" onchange="selecthide(this)" onblur="selecthide(this)"> 
      <option value="1">This is select number 1</option> 
      <option value="2">This is select number 2</option> 
      <option value="3">This is select number 3</option> 
      <option value="4">This is select number 4</option> 
      <option value="5">This is select number 5</option> 
      <option value="6">This is select number 6</option> 
      <option value="7">This is select number 7</option> 
      <option value="8">This is select number 8</option> 
      <option value="9">This is select number 9</option> 
      <option value="10">This is select number 10</option> 
      <option value="11">This is select number 11</option> 
      <option value="12">This is select number 12</option> 
      <option value="13">This is select number 13</option> 
      <option value="14">This is select number 14</option> 
      <option value="15">This is select number 15</option> 
      <option value="16">This is select number 16</option> 
      <option value="17">This is select number 17</option> 
      <option value="18">This is select number 18</option> 
      <option value="19">This is select number 19</option> 
      <option value="20">This is select number 20</option> 
      <option value="21">This is select number 21</option> 
      <option value="22">This is select number 22</option> 
      <option value="23">This is select number 23</option> 
      <option value="24">This is select number 24</option> 
     </select> 
    </li> 
</ul>