Question

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

<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

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

Answer 2

浏览器还没有标准化的显示数据列表的方法（有些浏览器甚至可能不支持它。）如果你正在寻找一个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 j兼容的新主要版本。

Answer 3

此示例有效

   <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

如何更改datalist的显示宽度

3 个答案: