How to add margin or padding bottom to html datalist option?

Viewed 27

I have a html code:

<div class="oas-wrapper">
  <div>
    <form>
      <input type="text" id="scales" name="example" placeholder="###" list="exampleList">
      <datalist id="exampleList">
                <option value="A">  
                <option value="B">
                <option value="C">  
                <option value="D">
              </datalist>
    </form>
  </div>
</div>

<div class='next-wrapper'>some content here</div>

However once there are lots of options ,the option will cover part of class 'next-wrapper',I have tried add margin and padding bottom in the datalist or option tag ,but nothing changed ,any suggesting ?

1 Answers

Like select elements, the datalist element has very little flexibility in styling. You cannot change margin and padding Browsers define their own styles for these elements.

Related