HTML 中的选择下拉表单选项（单击时）相对于初始选择框来说太大了？

Question

如果我的措辞很奇怪，我很抱歉，对于 css/html 来说仍然相对较新。当我单击下拉框选择选项时，选项比选择框本身大得多，我不知道如何修复它。这似乎与我在（1080x2400）中查看它的窗口的大小有关，因为在常规窗口中查看而不打开检查元素不会出现问题。感谢您的帮助！

HTML：

<div class="addSoundScreen">
<label for="audioType">Choose Category</label>
        <select id="audioType">
            <option value="music">Music</option>
            <option value="ambiance">Ambiance</option>
            <option value="effects">Effects</option>
        </select>
</div>

CSS

.addSoundScreen {
    display: none;
    position: fixed;
    box-sizing: border-box;
    padding: 1%;
    background-color: rgba(0, 0, 0, 0.705);
    
    bottom: 20vh;
    left: 15vw;
    height: 70vh;
    width: 70vw;
    border-radius: 10%;
    
    flex-direction: column;
    align-items: center;

    font-size: 280%;
    text-align: center;
    color: aliceblue;
}.addSoundScreen select{
    margin: 1%;
    width: 60%;
    height: 5%;
    font-size: 100%;
}

当我尝试增加字体大小时，它变得更大，但即使我调整“选项”的字体大小，它也不会删除溢出窗口的所有额外空间（参见屏幕截图）。

Answer 1

您的 HTML 和 CSS 是正确的，但请注意，某些浏览器有自己的处理选择的方式。

这里有一个选项：

.addSoundScreen select option{
    font-size: 16px;
}

您还可以尝试使用 CSS 重置来覆盖浏览器可能应用于选择框和选项的任何默认样式。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}