当 px 大于 600px 时，datalist 选项宽度小于输入宽度。如何在 chrome 上动态修复它

Question

大家好我正在使用flask WTForm表单控件类作为宽度，但不确定如何在snipet中做到这一点，所以我对宽度进行了硬编码。

我面临的问题是输入真的很长，但下拉选项与输入宽度不匹配。当您运行代码段时，您可以看到下拉菜单是输入宽度的 1/10。我尝试给选项和数据列表相同的宽度，但没有任何效果。

我将如何使 chrome 上的选项下拉菜单与我的输入具有相同的宽度，谢谢

<input class="form-control" type="text" id="color" style = "width:800px" list="colors_data">
                        <datalist id="colors_data"class="form-control"style = "width:800px">
                          <option style = "width:800px"value="red"></option>
                          <option style = "width:800px"value="orange"></option>
                          <option style = "width:800px"value="green"></option>
                          <option style = "width:800px"value="blue">The color of the sky</option>
                        </datalist>

编辑：将大小更改为 800px 我尝试通过此链接创建我自己的数据列表，但我面临同样的问题 Creating a HTML5 datalist on the fly

我附上了一张图片以更清楚地显示问题。如您所见，下拉选项比输入本身小得多。我该如何解决这个问题谢谢

Answer 1

好吧，现在我终于知道你想要什么了，这是你的代码：

<input style = "width:200px; height:30px;" list="colors_data">
<datalist id="colors_data">
<option value="red">The color of apple</option>
<option value="orange">The color of sun</option>
<option value="green">The color of grass</option>
<option value="blue">The color of the sky</option>
</datalist>