我將如何控制下拉選擇菜單的位置？

我有一個下拉選擇菜單，我想知道是否有辦法控制選項擴展的方式？默認情況下，似乎要麼取決於列表中有多少項目。我將如何控制下拉選擇菜單的位置？

我想阻止下拉選項顯示和其他表單域。當您從列表中選擇「國家/地區」時，菜單向下擴展（我想要的位置），但是當您從具有不同選擇的「州/地區」字段中選擇一個選項時（例如英國）擴展到其他表單域，這是我不想要的。有任何解決這個問題的方法嗎？

這裏是我的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>

來源

2013-10-27 Marlon Fowler

你可以做一個jsfiddle.net或添加一些更多的代碼讓我做小提琴嗎？ –

如果你正在談論''時，IE尤其困難，這就是爲什麼許多插件已被開發出來的原因。你可以做很少的事來改變瀏覽器的默認行爲 – charlietfl

Josh，我添加了HTML。 –