如何更改datalist的显示宽度

Question

我有一个HTML datalist的简单问题，但不知何故无法解决这个问题。我试图更改以下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