使用chrome中的datalist溢出HTML5 <input>标记

Question

我在http://codepen.io/liang179/pen/WQvERK上有一个HTML页面,其中包含与大型数据列表相关联的标记.它在chrome中显示有溢出.屏幕上还有数据.但是在带有滚动条的firefox中它很好.我可以做些什么来使用滚动条在chrome中显示它,就像在firefox中一样.下面是代码.

$('#trigger').click(function(){
		$class = "animated infinite " + $('#type').val();
		$('#target').removeClass().addClass($class);
});

<div style="text-align: center;">
	<div id='target' style="margin: 200px auto; width: 200px; height:200px; background-color:#663399"></div>
	<div>
		<input id="type" list="classes">
		<datalist id="classes">
			<option value="bounce">
			<option value="flash">
			<option value="pulse">
			<option value="rubberBand">
			<option value="shake">
			<option value="swing">
			<option value="tada">
			<option value="wobble">
			<option value="jello">
			<option value="bounceIn">
			<option value="bounceInDown">
			<option value="bounceInLeft">
			<option value="bounceInRight">
			<option value="bounceInUp">
			<option value="bounceOut">
			<option value="bounceOutDown">
			<option value="bounceOutLeft">
			<option value="bounceOutRight">
			<option value="bounceOutUp">
			<option value="fadeIn">
			<option value="fadeInDown">
			<option value="fadeInDownBig">
			<option value="fadeInLeft">
			<option value="fadeInLeftBig">
			<option value="fadeInRight">
			<option value="fadeInRightBig">
			<option value="fadeInUp">
			<option value="fadeInUpBig">
			<option value="fadeOut">
			<option value="fadeOutDown">
			<option value="fadeOutDownBig">
			<option value="fadeOutLeft">
			<option value="fadeOutLeftBig">
			<option value="fadeOutRight">
			<option value="fadeOutRightBig">
			<option value="fadeOutUp">
			<option value="fadeOutUpBig">
			<option value="flipInX">
			<option value="flipInY">
			<option value="flipOutX">
			<option value="flipOutY">
			<option value="lightSpeedIn">
			<option value="lightSpeedOut">
			<option value="rotateIn">
			<option value="rotateInDownLeft">
			<option value="rotateInDownRight">
			<option value="rotateInUpLeft">
			<option value="rotateInUpRight">
			<option value="rotateOut">
			<option value="rotateOutDownLeft">
			<option value="rotateOutDownRight">
			<option value="rotateOutUpLeft">
			<option value="rotateOutUpRight">
			<option value="hinge">
			<option value="rollIn">
			<option value="rollOut">
			<option value="zoomIn">
			<option value="zoomInDown">
			<option value="zoomInLeft">
			<option value="zoomInRight">
			<option value="zoomInUp">
			<option value="zoomOut">
			<option value="zoomOutDown">
			<option value="zoomOutLeft">
			<option value="zoomOutRight">
			<option value="zoomOutUp">
			<option value="slideInDown">
			<option value="slideInLeft">
			<option value="slideInRight">
			<option value="slideInUp">
			<option value="slideOutDown">
			<option value="slideOutLeft">
			<option value="slideOutRight">
			<option value="slideOutUp">
		</datalist>
		<button id="trigger">Trigger</button>
	</div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

Answer 1

Chromium 错误跟踪器上有针对此错误的通知单，自 2014 年起开放。最近的一些评论表明，该错误可能会在 2017 年初得到优先处理。

\n

https://bugs.chromium.org/p/chromium/issues/detail?id=375637

\n

\n

zkoch@\xe2\x80\xa6um.org 的评论 65，2016 年 9 月 16 日

\n

[\xe2\x80\xa6] 我将尝试在 2017 年初优先考虑此问题。

\n

rbyers@\xe2\x80\xa6um.org 的评论 69，2017 年 3 月 23 日

\n

可预测性计划正在审查本季度前 50 个加星标的 Blink 错误\n，这在该列表中排名第 46。我们\xe2\x80\x99希望对于每个\n我们可以关闭它，设置所有者和目标里程碑，或者设置\nNextAction日期，以便我们知道何时重新检查。

\n

\n\n

更新： 2018 年 4 月 17 日的评论表明已发布修复程序：

\n

\n

lonnie\xe2\x80\xa6@\xe2\x80\xa6rt.com 的评论 91，4 月 17 日

\n

我还想对此表示感谢。滚动条的实现在版本 65.0.3325.181（官方版本）（64 位）中看起来非常好。

\n

\n

然而，由于 Windows 10 中发现了一些错误，该票证仍然处于开放状态（截至 2018 年 5 月）。它已合并到票证#773041中。

\n