如何控制下拉选择菜单的位置? [英] How would I control the position of a drop down select menu?

问题描述

我有一个下拉选择菜单，我想知道是否有一种方法可以控制选项的扩展方式?默认值似乎有两种选择，取决于列表中有多少项.

I have a drop down select menu, and I wanted to know if there is a way to control the way in which the options expand? The default seems to go either way and depends on how many items are in the list.

我想防止下拉选项在其他表单字段上方和上方显示.当您从列表中选择国家"时，菜单会向下扩展(我想要的位置)，但是当您从州/地区"字段中选择一个选项时，菜单有很多不同的选择(例如英国)扩展并覆盖其他表单字段，这是我不需要的.反正要解决这个问题吗?

I would like to prevent the drop down options from displaying up and over the other form fields. When you select 'country' from the list, the menu expands downward (where I want it), but when you select an option from the 'state/region' field that has quite a few different choices (such as the UK) the menu expands up and over the other form fields, something I don't want. Anyway to fix this?

这是我的CSS ----->

Here is my CSS ----->

#country {
    position:relative;
    background-image:url(../images/drop-down-selector.svg);
    background-position:260px, center;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:0px 0px 0px 1px #b5e7ff;
    border:none;
    outline:none;
    left:2px;
    width:292px;
    height:47px;
    font-size:1.5em;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
    color:#5fccff;
    border-radius:0;
}

#state {
    position:relative;
    background-image:url(../images/drop-down-selector.svg);
    background-position:260px, center;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:0px 0px 0px 1px #b5e7ff;
    border:none;
    outline:none;
    left:2px;
    width:292px;
    height:47px;
    font-size:1.5em;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
    color:#5fccff;
    border-radius:0;
}

其他代码----->

Additional code ----->

<select name="Country" id="country">
    <option value="">-Country-</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Canada">Canada</option>
    <option value="Australia">Australia</option>
    <option value="Brazil">Brazil</option>
    <option value="France">France</option>
    <option value="Italy">Italy</option>
    <option value="New Zealand">New Zealand</option>
    <option value="South Africa">South Africa</option>
</select>

推荐答案

您无法控制下拉扩展方向.这是浏览器计算的.也许您可以尝试一些解决方法.制作自己的自定义下拉系统?也许有一个伪造的选择框，第二个下拉菜单位于其他位置.或者避免您的问题与其他解决方案一起

You cannot control the drop down expansion direction. This is something the browser calculates. Perhaps you can try making some workaround. Make your own custom dropdown system? Maybe have a fake select box with a second dropdown positioned elsewhere. Or avoid your problem all together with someother soluti

相关:我如何控制下拉列表的扩展方向?

这篇关于如何控制下拉选择菜单的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！