HTML选择标记显示10个选项的垂直滚动

我想制作一个这样的选择框

有10个选择选项，当我尝试添加超过15个选项时，它会显示垂直滚动条，但是当它有10个选项时不显示。

有没有办法实现这一目标。

Answer 1

将size="10"应用于您的选择。

就像是：

  // all your options  

---

你必须在边框，背景图像等标签上添加一些样式。

这样的事情要做：

 Select options 
  // all the options  

然后使用这个jQuery代码：

 $('#choose').click(function(){ $(this).siblings('select').toggle(); }); 

演示@Fiddle

---

试试这个：

 $('#choose').click(function (e) { e.stopPropagation(); $(this).siblings('select').css('width', $(this).outerWidth(true)).toggle(); }); $('#options').change(function (e) { e.stopPropagation(); var val = this.value || 'Select options'; $(this).siblings('#choose').text(val); $(this).hide(); }); 

---

正如你评论的那样：

当大小大于1的select标签时，它在hover时不显示蓝色背景，当我通过css选项添加背景时：hover，它在FF中工作，但不在chrome和safari中。

所以你可以用这个模型：

 $('#options').find('option').on({ mouseover: function () { $('.hover').removeClass('hover'); $(this).addClass('hover'); }, mouseleave: function () { $(this).removeClass('hover'); } }); 

使用hover类进行演示 。

Answer 2

如果你想要漂亮的下拉菜单，你可以使用

http://harvesthq.github.io/chosen/

您可以使用css控制下拉列表的高度。

Answer 3

“大小”属性指定下拉列表中的可见选项数。 如果size属性的值大于1，但低于列表中选项的总数，则浏览器将添加滚动条以指示还有更多选项可供查看。

所以使用..