增加连续数据项之间的间距

Question

我正在使用一个数据列表来显示下拉

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

如何增加两个数据行之间的间距?如果我尝试添加

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

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

如何解决这个问题?

Answer 1

不幸的是，这还不可能。最新版本的Chrome不再将<br />显示为文本，但也不会在下拉菜单中呈现换行符。

一般来说，这应该与CSS修复，因为它是一个样式问题，但这也不起作用。实际的datalist元素只提供建议下拉框的值，但元素本身没有显示。您看到的列表驻留在影子DOM中，就像(例如)<input type="number" />上的向上/向下箭头一样。

人们会希望一些datalist伪选择器，如input::-webkit-outer-spin-button, Chrome有数字控制，但没有指定或实现datalist。