如何降低选择下拉框的高度

Question

我在选择 html 标记时遇到问题。当我有一个太大的列表，有这么多元素时，我有一个项目。问题是我想缩小下拉框的高度，不知道怎么做。

当我点击选择标签时会发生以下情况：

我希望它更小，比如一次显示 10 个元素。

这是我的html：

    .selectWrapper, .selectBrand {
        width: 60%;
        display: grid;
        grid-template-areas: "select";
        align-items: center;
            
        &::after {
            content: '';
            clip-path: polygon(100% 0%, 0 0%, 50% 100%);
            width: 0.8em;
            height: 0.5em;
            grid-area: select;
            justify-self: end;
            margin-right: 1em;
            background-color: #110F30;
            pointer-events: none;
            transition: transform 0.2s ease-out;
        }
            
        &:focus-within {
            &::after {
                transform: rotate(180deg);
            }
        }
            
        select {
            appearance: none;
            width: 100%;
            height: 3em;
            border-radius: 50px;
            border: none;
            outline: none;
            padding-inline: 1em;
            align-items: center;
            grid-area: select;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.8em;
            color: #535353;
            background: linear-gradient(145deg, #d3d3d3, 
            #fafafa);
            box-shadow: 10px 10px 20px #a4a4a4,
            -10px -10px 20px #ffffff;
            
            &:hover {
                cursor: pointer;
            }
        }         
    }

    <div class="selectWrapper">
        <select name="typeSol" class="titSol" required>
            <option value="" disabled selected>Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <option value="">Select a Type</option>
            <!-- More options -->
        </select>
    </div>

希望任何人都可以提供帮助。

Answer 1

您可以使用以下onfocus、onblur 和onchange 事件来更改此设置。其中this 代表 HTML DOM 元素。您可以相应地更改值

.titSol, .selectBrand {
        width: 60%;
        display: grid;
        grid-template-areas: "select";
        align-items: center;
            
        &::after {
            content: '';
            clip-path: polygon(100% 0%, 0 0%, 50% 100%);
            width: 0.8em;
            height: 0.5em;
            grid-area: select;
            align-self: end;
            margin-right: 1em;
            background-color: #110F30;
            pointer-events: none;
            transition: transform 0.2s ease-out;
        }
            
        &:focus-within {
            &::after {
                transform: rotate(180deg);
            }
        }
            
        select {
            appearance: none;
            width: 100%;
            height: 3em;
            border-radius: 50px;
            border: none;
            outline: none;
            padding-inline: 1em;
            align-items: center;
            grid-area: select;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.8em;
            color: #535353;
            background: linear-gradient(145deg, #d3d3d3, 
            #fafafa);
            box-shadow: 10px 10px 20px #a4a4a4,
            -10px -10px 20px #ffffff;
            
            &:hover {
                cursor: pointer;
            }
        }         
    }

<div class="selectWrapper">
    <select name="typeSol" class="titSol" onfocus='this.size=8;' onblur='this.size=1;' onchange='this.size=1; this.blur();' required>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <option value="" disabled selected>Select a Type</option>
        <!-- ...More Options -->
    </select>
</div>