datalist垂直滚动不能在chrome中工作 [英] datalist vertical scroll not working in chrome

问题描述

我曾使用 datalist 功能列出我的产品名称，如果列表过长，Google Chrome浏览器和某些浏览器中的垂直滚动不显示。是否可以在css风格中为数据列表添加 overflow-y：scroll ？使用下面的代码：数据库=真 =false>

< form action =demo_form.aspmethod = GET > <输入列表=浏览器名称=浏览器> < datalist id =浏览器> < option value =a>< / option> < option value =b>< / option> < option value =c>< / option> < option value =d>< / option> < option value =e>< / option> < option value =f>< / option> < option value =g>< / option> < option value =h>< / option> < option value =i>< / option> < option value =j>< / option> < option value =k>< / option> < option value =l>< / option> < option value =m>< / option> < option value =n>< / option> < option value =o>< / option> < option value =p>< / option> < option value =q>< / option> < option value =r>< / option> < option value =s>< / option> < option value =t>< / option> < option value =u>< / option> < option value =v>< / option> < option value =w>< / option> < option value =x>< / option> < option value =y>< / option> < option value =z>< / option> < option value =abc>< / option> < option value =def>< / option> < option value =ghi>< / option> < option value =jkl>< / option> < option value =mno>< / option> < option value =pqrs>< / option> < option value =tuv> < /选项> < /数据列表> < input type =submit>< / form>

解决方案

我已经使用ComboBox Javascript组件来解决这个问题，从： https://www.zoonman.com/projects/combobox/

  var no = new ComboBox（'cb_identifier'）;  

  div.combobox {font-family：Tahoma; font-size：12px} div.combobox {position：relative; zoom：1} div.combobox div.dropdownlist {display：none; width：200px; border：solid 1px＃000; background-color：#fff; height：200px; overflow：auto; position：absolute; top：18px; left：0px;} div.combobox .dropdownlist a {display：block; text-decoration：none; color：＃000; padding：1px; height：1em; cursor：default} div.combobox .dropdownlist a.light {color：#fff; background-color：＃007} div.combobox .dropdownlist，input {font-family：Tahoma; font-size：12px;} div.combobox input {float：left; width：182px; border：solid 1px #ccc; height：15px} div.combobox span {border：solid 1px #ccc; background：#eee; width：16px; height：17px; float：left; text-align：center; border-left：none; cursor：default}  

 < script type =text / javascriptcharset =utf-8src =https://www.zoonman.com/projects/combobox/combobox.js>< / script>< div class =combobox> < input type =textname =comboboxfieldnameid =cb_identifier> <跨度>▼< /跨度> < div class =dropdownlist> < a取代; ITEM1和LT; / A> < a>第二项目2< / a> < a>第三项目3< / a> < / div>< / div>  

I have used datalist function to list my product names, if list goes too long vertical scrolling not display in google chrome and some browsers. Is it possible to add overflow-y: scroll in css style for datalist? Used code below:

<form action="demo_form.asp" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="a"></option>
    <option value="b"></option>
    <option value="c"></option>
    <option value="d"></option>
    <option value="e"></option>
    <option value="f"></option>
    <option value="g"></option>
    <option value="h"></option>
    <option value="i"></option>
    <option value="j"></option>
    <option value="k"></option>
    <option value="l"></option>
    <option value="m"></option>
    <option value="n"></option>
    <option value="o"></option>
    <option value="p"></option>
    <option value="q"></option>
    <option value="r"></option>
    <option value="s"></option>
    <option value="t"></option>
    <option value="u"></option>
    <option value="v"></option>
    <option value="w"></option>
    <option value="x"></option>
    <option value="y"></option>
    <option value="z"></option>
    <option value="abc"></option>
    <option value="def"></option>
    <option value="ghi"></option>
    <option value="jkl"></option>
    <option value="mno"></option>
    <option value="pqrs"></option>
    <option value="tuv"> </option>
  </datalist>
  <input type="submit">

</form>

解决方案

I have used ComboBox Javascript Component to fix this problem, from: https://www.zoonman.com/projects/combobox/

var no = new ComboBox('cb_identifier');

div.combobox	{font-family: Tahoma;font-size: 12px}
	div.combobox	{position: relative;zoom: 1}
	div.combobox	div.dropdownlist	{display: none;width: 200px;
		border: solid 1px #000;background-color: #fff;
		height: 200px;overflow: auto;position: absolute;
		top: 18px;left: 0px;}
	div.combobox	.dropdownlist	a	{display: block;text-decoration: none;
		color: #000;padding: 1px;height: 1em;cursor: default}
	div.combobox	.dropdownlist	a.light	{color: #fff;
		background-color: #007}
	div.combobox	.dropdownlist, input {font-family: Tahoma;font-size: 12px;}
	div.combobox	input {float: left;width: 182px;
		border: solid 1px #ccc;height: 15px}
	div.combobox	span	{border: solid 1px #ccc;background: #eee;
		width: 16px;height: 17px;
		float: left;text-align: center;border-left: none;cursor: default}

<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>

<div class="combobox">
	<input type="text" name="comboboxfieldname" id="cb_identifier">

	<span>▼</span>
	<div class="dropdownlist">
		<a>Item1</a>
		<a>Second Item2</a>

		<a>Third Item3</a>
	</div>
</div>

这篇关于datalist垂直滚动不能在chrome中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！