9

ドロップダウンがページの<select><option>foo</option></select>下部に近すぎます。ドロップダウンを「ドロップアップ」にしてほしい。検索してみましたが、ナビゲーション メニューの情報しか表示できませんでした。top:100% と bottom:100% を position:absolute にしてみ<select class="select-store">ました。これは、優先せずに「ドロップアップ」するナビゲーション メニューのドロップダウンで見たものです。これは可能ですか？よろしくお願いします。コードは以下のとおりです。

HTML

<select class="select-store" onchange="document.location.href=this.value">
  <option value="/">Store Finder</option>
  <option value="/foo">foo</option>
  <option value="/beta">beta</option>
</select>

CSS

#finder .select-store{
  background: url("/images/storefinder_bg.png") no-repeat scroll 0 0 transparent;
  border: medium none;
  color: #5B5A5A;
  font-family: UNIV-C,Arial,Helvetica,sans-serif;
  font-size: 16px;
  font-weight: normal;
  height: 32px;
  line-height: 16px;
  padding: 3px;
  vertical-align: middle;
  width: 186px;
}
4

2 に答える 2

9

SELECT要素の動作はブラウザによって決定されます。ビューポート外のオーバーフローを単独で検出し、リストの位置を変更することがあります。これを直接制御することはできません。

スクリプトベースのシミュレートされた SELECT を使用すると、JS コードのオーバーフローを検出し、それに応じて再配置できます。

于 2013-09-20T14:52:00.233 に答える