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

Question

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

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

如何增加2个datalist行之间的间距。如果我尝试添加

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

这在Safari中显示正常但在Chrome中显示<br />为文本。

如何解决这个问题。

Answer 1

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

一般情况下，这应该用CSS修复，因为它是造型问题，但这也不起作用。实际的datalist元素仅提供建议下拉列表的值，但不显示元素本身。您看到的列表位于shadow DOM中，就像（例如）<input type="number" />上的向上/向下箭头一样。

人们希望Chrome有一些datalist伪选择器（例如input::-webkit-outer-spin-button）用于数字控件，但根本没有为datalist编制或实现任何伪选择器。