Scroll Bar for Datalist in HTML5

Scroll bar for Datalist in HTML5

Unfortunately, there's not much you can do with the datalist attribute. The datalist does not currently support any CSS styling, and specific visual characteristics are browser-specific. Some browsers may choose to add scrollbars for long lists.

If this isn't acceptable, you may have to forget the datalist and implement a ComboBox via Javascript. I believe JQuery has an autocomplete function that may be appropriate.

datalist vertical scroll not working in chrome

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>

Related Topics