Good afternoon, there is a dropdown list.

<select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select>

It is necessary that when pressed, only the first 4 would be displayed, and the rest could be selected using the scroll. Thanks in advance for the answer

    2 answers 2

    Sets the height of the list. If the value of the size attribute is 1, then the list becomes a drop-down. When adding a multiple attribute to an element with size = "1", the list is displayed as a "twist". In all other cases, a list with one or multiple selections is obtained. Syntax:

     <select size="<число>">...</select>
    • @SergeyVashchenko is not for that, always try to do without JS if it is realizable without it. Sooner or later, HTML will absorb it ... - Makarenko_I_V

    Just because it will not work, but you can combine the attribute size + JS.

     $(function() { var selectValue, $cSelect = $('.custom-select__select'); getVal(); $('.custom-select__selected-text').text(selectValue); $cSelect.on('change', function() { getVal() $('.custom-select__selected-text').text(selectValue); $(this).blur(); }); function getVal() { selectValue = $('.custom-select').find('option:selected').text() } }); 
     .custom-select { position: relative; } .custom-select__select { height: 0; width: 0; opacity: 0; position: absolute; left: 0; top: 100%; } .custom-select__selected-text { cursor: default; display: inline-block; padding: 1px 18px 1px 4px; border: 1px solid #aaa; border-radius: 1px; position: relative; font-size: 13px; font-family: sans-serif; } .custom-select__selected-text:after { position: absolute; content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 3px 0 3px; border-color: #000 transparent transparent transparent; top: 0; bottom: 0; right: 6px; margin: auto; } .custom-select__selected-text:focus + select, .custom-select__select:focus { height: auto; width: auto; overflow-y: scroll; opacity: 1; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="custom-select"> <div class="custom-select__selected-text" tabindex="1"></div> <select class="custom-select__select" size="6"> <option value="1" selected>One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> <option value="10">Ten</option> <option value="11">Eleven</option> <option value="12">Twelve</option> </select> </div>