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

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%;样式<option>。

float: left<option>破坏.txt 文件中标签的默认块格式化上下文行为<select>。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 中完全不受支持。

支持所有浏览器的解决方法是将其简单地包装在 a 中<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>

为了使其发挥作用，必须进行一些更改。size你的属性必须<select>与选项的数量相匹配，并且你的<div>高度必须有一个设定。