CODEWITHSUNDEEP
htmlcsshtml-datalist
user544079
user544079

Reputation: 16639

Increase spacing between consecutive datalist items

I am using a datalist to display a drop down as

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

How can I increase the spacing between 2 datalist rows. If I try adding

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

This shows up fine in Safari but shows a <br /> as text in chrome.

How can this be resolved.

Upvotes: 1

Views: 503

Answers (1)

Stephan Muller
Stephan Muller

Reputation: 27630

Unfortunately this is not possible as of yet. Recent versions of Chrome don't show the <br /> as text anymore, but also don't render a newline in the dropdown.

Generally this should be fixed with CSS as it's a styling problem, but that doesn't work either. The actual datalist element only provides values for the suggestion dropdown, but the element itself is not shown. The list you see resides in the shadow DOM, just like (for example) the up/down arrows on an <input type="number" />.

One would hope for some datalist pseudo-selectors like input::-webkit-outer-spin-button that Chrome has for the number controls, but none have been specced or implemented for datalist at all.

Upvotes: 1

Related Questions