html - 增加连续数据列表项之间的间距

Question

我正在使用数据列表将下拉菜单显示为

<datalist id="ddl1">
    <option value="one">Apple</option>
    <option vlaue="two">Mango</option>
    <option value="three">Cherry</option>
</datalist>

如何增加 2 个数据列表行之间的间距。如果我尝试添加

<option value="one">One<br /></option>

这在 Safari 中显示良好，但<br />在 chrome 中显示为文本。

这怎么能解决。

Answer 1

不幸的是，目前这还不可能。最近版本的 Chrome 不再显示<br />为文本，但也不会在下拉列表中呈现换行符。

通常这应该用 CSS 修复，因为它是一个样式问题，但这也不起作用。实际datalist元素仅提供建议下拉菜单的值，但未显示元素本身。您看到的列表位于 shadow DOM 中，就像（例如）<input type="number" />.

人们希望有一些datalist像 Chrome 那样用于数字控件的伪选择器input::-webkit-outer-spin-button，但根本没有指定或实现任何一个datalist。