89

選択ボックスをクリックしたときに表示されるドロップダウンの高さを変更できないことを誰かが確認できますか?

select の size 属性によってリストのように見えますが、CSS の height 属性もあまり効果がありません。

4

8 に答える 8

96

確認済み。

ドロップダウンする部分は、次のいずれかに設定されます。

  1. すべてのエントリを表示するために必要な高さ、または
  2. エントリを表示するために必要な高さx(スクロールバーで残りを表示) x。
    • Firefox と Chrome で 20
    • IE 6、7、8 では 30
    • Opera 10 の場合は 16
    • Opera 11 の場合は 14
    • Safari 4 の場合は 22
    • Safari 5 の場合は 18
    • IE 5.0、5.5 では 11
  3. IE/Edge では、オプションがない場合、11 個の空白エントリのばかげたリストが表示されます。

上記の (3) については、このJSFiddleで結果を確認できます

于 2009-02-20T18:04:19.140 に答える
5

私はこの問題に対処するためにドロップダウン置換jqueryプラグインに取り組んできました。この投稿の時点では、外観と機能の点でネイティブドロップダウンとほとんど区別できません。

ここにデモがあります（ダウンロードへのリンクもあります）：http： //programmingdrunk.com/current-projects/dropdownReplacement/

プラグインのプロジェクトページは次のとおりです。

http://plugins.jquery.com/project/dropdownreplacement

（更新:)jqueryプラグインページが機能しなくなったようです。プラグインが機能するようになったときに、プラグインを新しいサイトに配置しない可能性があります。デモ/ダウンロードには、programmingdrunk.comのリンクを使用してください。

于 2010-05-04T15:38:23.047 に答える
2

実際、あなたは一種のことができます！javascript に煩わされないでください...私が作成している Web サイトで同じことで立ち往生していたのですが、タグの CSS で「font-size」属性を増やすと、高さも自動的に増加します。ささいなことですが、それは私をとても悩ませているものです。

于 2011-04-21T07:42:47.570 に答える
0

Chi Rowの回答は問題に対する適切なオプションですが、onclick引数にエラーが見つかりました。代わりに、次のようになります。

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

（そして、「 n 」を必要な行数に置き換える必要があることに注意してください）

于 2015-02-12T13:04:43.747 に答える
-2

1本で高さを変えることができます。使用しないでくださいheight="500"(単なる例の番号)。スタイルを使用します。<style>タグを使用するか、これを使用できます。

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

変更点にスポットライトを当てます。

  <select id="option" style="height: 100px;">

さらに良いことに...

style="height: 100px;">

わかりますか？

役に立ったら投票してください！

于 2020-05-20T05:29:53.813 に答える