9

我对 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">

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

此致

4

3 回答 3

4 

<input list="browsers" name="browser" style="width: 100px;">

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

于 2015-11-13T15:05:58.317 回答
0

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

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

https://github.com/aFarkas/webshim

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

于 2015-11-11T20:11:48.923 回答
-4

这个例子有效

   <input list="cropBeds" id="myCropBeds" name="listCropBeds" />
   <datalist id="cropBeds">
    <option value="TO">
    <option value="TM">
    <option value="TE">
    <option value="TS">
    <option value="LT">
    <option value="JT">
   </datalist>

带有一个 css 文件

   input[name='listCropBeds']{width: 30px;}

灵感就在那里：https ://codepen.io/anon/pen/xRjzKg

于 2018-03-06T20:47:47.600 回答