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

Question

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first_name-required">

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

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

喜欢这个

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

Answer 1

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

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

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

P.S。这解决了Chrome和IE11的问题，无法修复IE10和Firefox，因为它们根本不支持.Something { overflow-x: scroll; width: 16%; } option { float: left; min-width: 100%; }元素的水平滚动：）

＆＃13;

＆＃13;

<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>

＆＃13;

ffmpeg -i source.mp4 -f webm -vcodec libvpx -acodec libvorbis -b:v 10M -crf 50 -y result.webm

＆＃13;

＆＃13;

＆＃13;

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>

必须进行一些更改才能实现。 size的{​​{1}}属性必须与选项数量相匹配，而<select>必须具有设定的高度。