如何使我的网页中的 select 标记可滚动

Question

Code of my Index page. The aim is to make sure the select tags used in the search section of the webpage scrollable. At the moment when I try scrolling through the options in each select tag, the whole webpage moves.

<!-- Search Section Begin -->
<section class="search-section spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="section-title">
                    <h4>Where would you rather live?</h4>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="change-btn">
                    <div class="cb-item">
                        <label for="cb-rent" class="active">
                            For Rent
                            <input type="radio" id="cb-rent">
                        </label>
                    </div>
                    <div class="cb-item">
                        <label for="cb-sale">
                            For Sale
                            <input type="radio" id="cb-sale">
                        </label>
                    </div>
                </div>
            </div>
        </div>
       <div class="search-form-content">
            <form action="{% url 'search' %}" class="filter-form">
            <div>
                <select class="sm-width">
                    <option value="">Chose The City</option>
                </select>
                </div>
                <div >
                <select class="sm-width" name='state'>
                   <option >Location</option>
                    {% for key, value in state_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='property_status' >
                    <option >Property Status</option>
                    {% for key, value in property_status_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='property_type'>
                    <option >Property Type</option>
                    {% for key, value in property_type_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='bedroom'>
                    <option selected='true' disabled="disabled">No Of Bedrooms</option>
                     {% for key, value in bedroom_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div>
                <select class="sm-width" name='bathroom'>
                    <option selected='true' disabled="disabled">No Of Bathrooms</option>
                    {% for key, value in bathroom_choices.items %}
                    <option value="{{ key }}" >{{ value }}</option>
                    {% endfor %}
                </select>
                </div>
                <div class="room-size-range-wrap sm-width">
                    <div class="price-text">
                        <label for="roomsizeRange">Size:</label>
                        <input type="text" id="roomsizeRange" readonly>
                    </div>
                    <div id="roomsize-range" class="slider"></div>
                </div>
                <div class="price-range-wrap sm-width">
                    <div class="price-text">
                        <label for="priceRange">Price:</label>
                        <input type="text" id="priceRange" readonly>
                    </div>
                    <div id="price-range" class="slider"></div>
                </div>
                <button type="button" class="search-btn sm-width">Search</button>
            </form>
        </div>

My views code used for displaying information in my index page

from django.shortcuts import render
from properties.models import Property
from properties.choices import bedroom_choices, property_type_choice, 
property_status_choice, bathroom_choices, state_choices


# Create your views here.
def index(request):
    properties = Property.objects.order_by('-list_date')[:6]

    context={
        'properties': properties,
        'bedroom_choices': bedroom_choices,
        'bathroom_choices': bathroom_choices,
        'state_choices': state_choices,
        'property_type_choices':property_type_choice,
        'property_status_choices': property_status_choice,
    }
    return render(request, 'pages/index.html', context)

Image of the section section I am talking about.

For the choices.py imported in the views, the dictionary of items used is shown below

property_status_choice= {
'Rent': 'Rent',
'Sale': 'Sale'
}
property_type_choice= {
    '1':'All',
    '2':'Apartment',
    '3':'House',
    '4':'Office',
    '5':'Hotel',
    '6':'Restaurent'
}
bedroom_choices = {
  '1':1,
  '2':2,
  '3':3,
  '4':4,
  '5':5,
  '6':6,
  '7':7,
  '8':8,
  '9':9,
  '10':10
  }
bathroom_choices = {
  '1':1,
  '2':2,
  '3':3,
  '4':4,
  '5':5,
  '6':6,
  '7':7,
  '8':8,
  '9':9,
  '10':10
  }
state_choices = {
    'AK': 'Alaska',
    'AL': 'Alabama',
    'AR': 'Arkansas',
    'AS': 'American Samoa',
    'AZ': 'Arizona',
    'CA': 'California',
    'CO': 'Colorado',
    'CT': 'Connecticut',
    'DC': 'District of Columbia',
    'DE': 'Delaware',
    'FL': 'Florida',
    'GA': 'Georgia',
    'GU': 'Guam',
    'HI': 'Hawaii',
    'IA': 'Iowa',
    'ID': 'Idaho',
    'IL': 'Illinois',
    'IN': 'Indiana',
    'KS': 'Kansas',
    'KY': 'Kentucky',
    'LA': 'Louisiana',
    'MA': 'Massachusetts',
    'MD': 'Maryland',
    'ME': 'Maine',
    'MI': 'Michigan',
    'MN': 'Minnesota',
    'MO': 'Missouri',
    'MP': 'Northern Mariana Islands',
    'MS': 'Mississippi',
    'MT': 'Montana',
    'NA': 'National',
    'NC': 'North Carolina',
    'ND': 'North Dakota',
    'NE': 'Nebraska',
    'NH': 'New Hampshire',
    'NJ': 'New Jersey',
    'NM': 'New Mexico',
    'NV': 'Nevada',
    'NY': 'New York',
    'OH': 'Ohio',
    'OK': 'Oklahoma',
    'OR': 'Oregon',
    'PA': 'Pennsylvania',
    'PR': 'Puerto Rico',
    'RI': 'Rhode Island',
    'SC': 'South Carolina',
    'SD': 'South Dakota',
    'TN': 'Tennessee',
    'TX': 'Texas',
    'UT': 'Utah',
    'VA': 'Virginia',
    'VI': 'Virgin Islands',
    'VT': 'Vermont',
    'WA': 'Washington',
    'WI': 'Wisconsin',
    'WV': 'West Virginia',
    'WY': 'Wyoming'
}

Answer 1

You can set a height to the dropdown container and make it scroll using overflow-y: auto;