选定的选项将在带有滚动条的多个下拉选择标记中消失

Question

我有以下多个下拉选择标记

 .Something { overflow-x: scroll; width: 16%; } 

 <select multiple size="5" class="Something"> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Option n fgnfn ghdnghd ngdh 2</option> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Option n fgnfn ghdnghd ngdh 2</option> <option>Option n fgnfn ghdnghd ngdh 2</option> </select> 

因此，每当我选择一个选项时，它右侧的文本就会消失。

像这样

我的门户网站上有几个下拉菜单。 我不希望选项文本消失。 这可以使用HTML或CSS完成，而不是编写自定义的JavaScript代码吗？ 如果是这样的话？

Answer 1

不知道为什么会这样，我可以在Chrome中重现。

这似乎解决了这个问题。 设置float: left; min-width: 100%; float: left; min-width: 100%; 在<option>元素样式上。

float: left破坏<select> <option>标记的默认块格式化上下文行为。 min-width: 100%只是让它更美观，它确保即使是<option>标签内容短于<select>的宽度也会在选中时“完全突出显示”。

PS这解决了Chrome和IE11的问题，不会为IE10和Firefox修复它，因为它们根本不支持<select>元素上的水平滚动:)

 .Something { overflow-x: scroll; width: 16%; } option { float: left; min-width: 100%; } 

 <select multiple size="5" class="Something"> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Option n fgnfn ghdnghd ngdh 2</option> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Option n fgnfn ghdnghd ngdh 2</option> <option>Option n fgnfn ghdnghd ngdh 2</option> </select> 

Answer 2

对于<select>元素的水平滚动在Edge / Chrome中是错误的，并且在Firefox中完全不受支持。

一个解决方案支持所有浏览器只需将其包装在<div> ，然后在其中应用一些CSS：

 .Something { overflow-x: auto; overflow-y: auto; width: 20%; height: 100px; } .Something > select { overflow-y: hidden; } 

 <div class="Something"> <select multiple size="6"> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Option n fgnfn ghdnghd ngdh 2</option> <option>Optionfghfghfgdgdffyuujkyujg 1</option> <option>Option n fgnfn ghdnghd ngdh 2</option> <option>Option n fgnfn ghdnghd ngdh 2</option> </select> </div> 

必须进行一些更改才能实现。 <select>的size属性必须与选项数相匹配，并且<div>必须具有设置的高度。