1

ドロップダウン選択メニューがあり、オプションの展開方法を制御する方法があるかどうか知りたいですか? デフォルトはどちらの方向にも進むようで、リストにある項目の数によって異なります。

ドロップダウン オプションが他のフォーム フィールドの上に表示されないようにしたいと考えています。リストから「国」を選択すると、メニューが下に展開されますが（希望する場所）、「州/地域」フィールドからオプションを選択すると、かなりの数の選択肢があります（英国など）。他のフォームフィールドの上に展開されますが、これは望ましくありません。とにかくこれを修正するには？

これが私の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>
4

2 に答える 2

0

通常、ブラウザはドロップダウンのオプション ボックスの位置を制御します。通常、下向きに表示するのに十分なスペースがある場合は、下向きに表示します。下にスペースが無いので上に上がります。

解決策は、これを可能にするドロップダウン リスト プラグインを使用して、オプション ボックスの高さを制御することです。選ばれたようなもの: http://harvesthq.github.io/chosen/ . ただし、これはオプション ボックスが常にダウンすることを保証するものではありません。たとえば、入力ボックスがページの一番下にある場合、オプション ボックスはどこに配置すればよいでしょうか?

別の解決策は、ドロップダウンをオートコンプリート リスト (jquery ui オートコンプリートなど) に置き換えて、オプションを少なくすることです。おそらくユーザーエクスペリエンスも向上するでしょう:)。

于 2013-10-27T19:17:44.597 に答える