input datalist如何设置显示数据宽度，高度？

Question

想实现效果

Answer 1

无法设置，以下是MDN上的描述：
有些元素根本不能用应用 CSS 样式。这些包括：所有高级用户界面小部件，如范围，颜色或日期控件; 和所有下拉小部件，包括<select>, <option>, <optgroup>和<datalist> 元素。文件选择器小部件也被称为不可样式化。新的<progress>和<meter> 元素也属于这个类别。

所有这些小部件的主要问题来自于它们具有非常复杂的结构，而 CSS 目前还不足以表达这些小部件的所有细微部分。如果你想定制这些小部件，你必须依靠 JavaScript 来构建一个你能够应用样式的 DOM 树。我们会在 How to build custom form widgets (en-US)一文中探索如何实现这一点。
https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Styling_...

Answer 2

<datalist>元素本身并不直接支持设置显示数据宽度和高度。要设置相关的宽度和高度，需要设置与其关联的<input>元素的样式。可以使用内联样式或外部样式表来设置宽度和高度。