我有一个下拉选择菜单,我想知道是否有办法控制选项展开的方式?默认值似乎是任意一种,取决于列表中有多少项。
我想防止下拉选项显示在其他表单字段上方。当您从列表中选择“国家/地区”时,菜单会向下展开(我想要的位置),但是当您从“州/地区”字段中选择一个选项时,该选项有很多不同的选择(例如英国)向上扩展并覆盖其他表单字段,这是我不想要的。有任何解决这个问题的方法吗?
这是我的 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;
}
附加代码----->
<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>
您无法控制下拉展开方向。这是浏览器计算的。也许您可以尝试制定一些解决方法。制作您自己的自定义下拉系统?也许有一个假选择框,第二个下拉菜单位于其他位置。或者通过其他解决方案来避免您的问题。
有关的:如何控制下拉列表的展开方向? https://stackoverflow.com/questions/8131700/how-can-i-control-the-expansion-direction-of-a-drop-down-list
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)