如何更改数据列表的显示宽度

Question

我对HTML数据列表有一个简单的问题，但不知何故无法解决此问题。我试图更改以下数据列表的显示宽度：

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="this is a really long name for a browser">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Internet Explorer">
</datalist>
<input type="submit">

但是无论我尝试什么，它仍然会减少“长”选项值。我如何更改它，以便数据列表显示所有选项值，无论它们多长时间？

最好的祝福

Answer 1

浏览器还没有显示数据列表的标准化方法（有些浏览器甚至可能不支持它。）如果您正在寻找一个polyfill，“remote-list”jQuery 插件使用 webshim 来添加提供一致的功能。外观和感觉。我使用 BrowserStack.com 测试了 webshim/datalist 组合，并且 Firefox、Chrome、iOS 9、Android 4.3、IE8/9/10/11/Edge 似乎都能正常工作，并且不受父 INPUT 字段宽度的限制。

https://github.com/aFarkas/remote-list

https://github.com/aFarkas/webshim

注意：webshim 开发人员表示他不打算开发一个与 jQuery 3.0 兼容的新主要版本。