给select下拉框设置高度

最新推荐文章于 2025-10-08 02:21:34 发布

原创最新推荐文章于 2025-10-08 02:21:34 发布 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css

网页开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用CSS来设定HTML select元素的显示高度，通过设置size属性达到指定行数的效果，以及当选项数量超过设定值时的处理方法。

给select下拉框设置高度

效果：

select属性：
onmousedown="if(this.options.length>4){this.size=4}" onblur="this.size=0" onchange="this.size=0"
this.size=4：高度为4行
this.options.length>4：总行数大于4的执行此代码

源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="./jquery-1.12.2.js"></script>
<title>给select下拉框设置高度</title>
</head>
<body>
<div class="article-start-box">
  <span class="categery">分类栏目</span>
</div>
    <select onmousedown="if(this.options.length>4){this.size=4}" >οnblur="this.size=0" οnchange="this.size=0">
           <option value="volvo">python</option>
           <option value="saab">c++</option>
           <option value="opel">c语言</option>
           <option value="audi">java</option>
           <option value="volvo">c#</option>
           <option value="saab">R语言</option>
           <option value="opel">前端三件套</option>
           <option value="audi">sql语言</option>
   </select>
</body>
</html>