スタイル付きドロップダウンをスクロール可能にするにはどうすればよいですか？

Question

私は、次のスタイルを作らドロップダウンメニューを使用してい

：

https://codepen.io/wallaceerick/pen/ctsCz

<select id="mounth"> 
    <option value="hide">-- Month --</option> 
    <option value="january" rel="icon-temperature">January</option> 
    <option value="february">February</option> 
    <option value="march">March</option> 
    <option value="april">April</option> 
    <option value="may">May</option> 
    <option value="june">June</option> 
    <option value="july">July</option> 
    <option value="august">August</option> 
    <option value="september">September</option> 
    <option value="october">October</option> 
    <option value="november">November</option> 
    <option value="december">December</option> 
</select> 

問題は、このメニューはスクロールではなく、その高さは制限はありませんということです。誰も私がどのようにアイテムの特定の数にドロップダウンの高さを制限し、通常のドロップダウンのようにスクロールするCSSを変更することができます教えてください？

Answer 1

あなたは.select-optionsにmax-heightを追加して、あなたのCSSのドロップダウンメニューのドロップダウン・コンテンツのoverflowプロパティを設定することができoverflow-y: scroll

/* 
 
Reference: http://jsfiddle.net/BB3JK/47/ 
 
*/ 
 

 
$('select').each(function(){ 
 
    var $this = $(this), numberOfOptions = $(this).children('option').length; 
 
    
 
    $this.addClass('select-hidden'); 
 
    $this.wrap('<div class="select"></div>'); 
 
    $this.after('<div class="select-styled"></div>'); 
 

 
    var $styledSelect = $this.next('div.select-styled'); 
 
    $styledSelect.text($this.children('option').eq(0).text()); 
 
    
 
    var $list = $('<ul />', { 
 
     'class': 'select-options' 
 
    }).insertAfter($styledSelect); 
 
    
 
    for (var i = 0; i < numberOfOptions; i++) { 
 
     $('<li />', { 
 
      text: $this.children('option').eq(i).text(), 
 
      rel: $this.children('option').eq(i).val() 
 
     }).appendTo($list); 
 
    } 
 
    
 
    var $listItems = $list.children('li'); 
 
    
 
    $styledSelect.click(function(e) { 
 
     e.stopPropagation(); 
 
     $('div.select-styled.active').not(this).each(function(){ 
 
      $(this).removeClass('active').next('ul.select-options').hide(); 
 
     }); 
 
     $(this).toggleClass('active').next('ul.select-options').toggle(); 
 
    }); 
 
    
 
    $listItems.click(function(e) { 
 
     e.stopPropagation(); 
 
     $styledSelect.text($(this).text()).removeClass('active'); 
 
     $this.val($(this).attr('rel')); 
 
     $list.hide(); 
 
     //console.log($this.val()); 
 
    }); 
 
    
 
    $(document).click(function() { 
 
     $styledSelect.removeClass('active'); 
 
     $list.hide(); 
 
    }); 
 

 
});

@import url("https://fonts.googleapis.com/css?family=Lato"); 
 
body { 
 
    font-family: Lato, Arial; 
 
    color: #fff; 
 
    padding: 20px; 
 
    background-color: #e74c3c; 
 
} 
 

 
h1 { 
 
    font-weight: normal; 
 
    font-size: 40px; 
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
} 
 
h1 span { 
 
    font-size: 13px; 
 
    display: block; 
 
    padding-left: 4px; 
 
} 
 

 
p { 
 
    margin-top: 200px; 
 
} 
 
p a { 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: #fff; 
 
    padding: 5px 10px; 
 
    margin: 0 5px; 
 
    background-color: #b83729; 
 
    -moz-transition: all 0.2s ease-in; 
 
    -o-transition: all 0.2s ease-in; 
 
    -webkit-transition: all 0.2s ease-in; 
 
    transition: all 0.2s ease-in; 
 
} 
 
p a:hover { 
 
    background-color: #ab3326; 
 
} 
 

 
.select-hidden { 
 
    display: none; 
 
    visibility: hidden; 
 
    padding-right: 10px; 
 
} 
 

 
.select { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    font-size: 16px; 
 
    color: #fff; 
 
    width: 220px; 
 
    height: 40px; 
 
} 
 

 
.select-styled { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #c0392b; 
 
    padding: 8px 15px; 
 
    -moz-transition: all 0.2s ease-in; 
 
    -o-transition: all 0.2s ease-in; 
 
    -webkit-transition: all 0.2s ease-in; 
 
    transition: all 0.2s ease-in; 
 
} 
 
.select-styled:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border: 7px solid transparent; 
 
    border-color: #fff transparent transparent transparent; 
 
    position: absolute; 
 
    top: 16px; 
 
    right: 10px; 
 
} 
 
.select-styled:hover { 
 
    background-color: #b83729; 
 
} 
 
.select-styled:active, .select-styled.active { 
 
    background-color: #ab3326; 
 
} 
 
.select-styled:active:after, .select-styled.active:after { 
 
    top: 9px; 
 
    border-color: transparent transparent #fff transparent; 
 
} 
 

 
.select-options { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 0; 
 
    left: 0; 
 
    z-index: 999; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    background-color: #ab3326; 
 
} 
 
.select-options li { 
 
    margin: 0; 
 
    padding: 12px 0; 
 
    text-indent: 15px; 
 
    border-top: 1px solid #962d22; 
 
    -moz-transition: all 0.15s ease-in; 
 
    -o-transition: all 0.15s ease-in; 
 
    -webkit-transition: all 0.15s ease-in; 
 
    transition: all 0.15s ease-in; 
 
} 
 
.select-options li:hover { 
 
    color: #c0392b; 
 
    background: #fff; 
 
} 
 
.select-options li[rel="hide"] { 
 
    display: none; 
 
} 
 

 
.select-options { 
 
    max-height: 176px; 
 
    overflow-y: scroll; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<h1>Custom Select <span>Without Plugin</span></h1> 
 
<!-- 
 
TO DO: 
 
1. Add icons to List 
 
2. Toogle opened state 
 
--> 
 

 
<select id="mounth"> 
 
    <option value="hide">-- Month --</option> 
 
    <option value="january" rel="icon-temperature">January</option> 
 
    <option value="february">February</option> 
 
    <option value="march">March</option> 
 
    <option value="april">April</option> 
 
    <option value="may">May</option> 
 
    <option value="june">June</option> 
 
    <option value="july">July</option> 
 
    <option value="august">August</option> 
 
    <option value="september">September</option> 
 
    <option value="october">October</option> 
 
    <option value="november">November</option> 
 
    <option value="december">December</option> 
 
</select> 
 

 
<select id="year"> 
 
    <option value="hide">-- Year --</option> 
 
    <option value="2010">2010</option> 
 
    <option value="2011">2011</option> 
 
    <option value="2012">2012</option> 
 
    <option value="2013">2013</option> 
 
    <option value="2014">2014</option> 
 
    <option value="2015">2015</option> 
 
</select> 
 

 
<p>See the <a href="https://codepen.io/wallaceerick/pen/fEdrz">Custom File Upload</a> demo!</p>

Answer 2

を設定することができます。次に、.dropdown-contentのheightを設定すると、メニューの高さが制限されていると、自動的にスクロールが許可されます。