選択ボックスをクリックしたときに表示されるドロップダウンの高さを変更できないことを誰かが確認できますか？
selectのsize属性はリストのように見えますが、CSSのheight属性もあまり役に立ちません。
回答:
確認済み。
ドロップダウンする部分は、次のいずれかに設定されます。
xエントリを表示するために必要な高さ（残りを確認するためのスクロールバー付き）、ここxで
上記の（3）については、このJSFiddleで結果を確認できます。
私はこの問題と戦うためにドロップダウン置換jqueryプラグインに取り組んできました。この投稿の時点では、外観と機能の点でネイティブドロップダウンとほとんど区別できません。
ここにデモがあります（ダウンロードへのリンクもあります）：http： //programmingdrunk.com/current-projects/dropdownReplacement/
プラグインのプロジェクトページは次のとおりです。
http://plugins.jquery.com/project/dropdownreplacement
（更新：）jqueryプラグインページが機能しなくなったようです。プラグインが機能するようになったときに、おそらくプラグインを新しいサイトに配置しないので、デモ/ダウンロードにはprogrammingdrunk.comリンクを使用してください。
いいえ。プロパティはブラウザ固有であるため、選択ドロップダウンの高さを変更することはできません。
ただし、その機能が必要な場合は、多くのオプションがあります。ブートストラップdropdown-menuを使用して、そのmax-heightプロパティを定義できます。このようなもの。
$('.dropdown-menu').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});.dropdown-menu {
max-height: 146px;
overflow: scroll;
overflow-x: hidden;
margin-top: 0px;
}
.caret {
float: right;
margin-top: 5%;
}
#menu1 {
width: 160px;
text-align: left;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="margin:10px">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>実際、あなたは一種のことができます！javascriptに煩わされないでください...私が作成しているWebサイトで同じことを続けていました。タグのCSSで「font-size」属性を増やすと、高さも自動的に増えます。ささいなことですが、それは私をとても悩ませるものですハハ
これは完璧な解決策ではありませんが、ある程度は機能します。
selectタグに、次の属性を含めます。ここで、「n」は表示されるドロップダウン行の数です。
<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>
このソリューションには3つの問題があります。1）最初のマウスクリック中に表示されるすべての要素がすばやく点滅します。2）位置は「絶対」に設定されます。3）「n」未満のアイテムがある場合でも、ドロップダウンボックスは「n」アイテムのサイズのままです。
カイ行の答えは、問題のために良いオプションですが、私は私のエラー見つけたonclick引数を。代わりに、次のようになります。
<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>
（そして、「n」を必要な行数に置き換える必要があることに注意してください）
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;">
分かりますか？
役に立ったら投票してください！
<select>要素自体ではなく、要素をクリックしたときに開くものの高さのスタイル設定に関する質問。このウィジェットのスタイリングが事実上不可能だった10年以上前に私はこの質問をしました。私はこれがもはや当てはまらないと確信しています。