1

There must be an answer to this, but after trying all so many, nothing seams to work on Chrome or Firefox, so, would you kindly offer a working solution using simple css / scss for controlling the spaces between <option> elements inside <select> drop-box. No matter what I try, each item has some top/bottom padding or margins and I am unable to get rid of it.

I am trying to have tiny, compact drop-box with tiny items with no spaces at all between any of them, so they are directly one below each other.

To be clear, I am looking for eliminating spaces between the individual <option> items (not for the main <select> box).

select {
  line-height: 9px;
  font-size: 8px;
  padding: 0px;
  margin: 0px;
}

option {
  line-height: 9px;
  font-size: 8px;
  padding-top: -4px;
  padding-bottom: -4px;
  margin-top: -4px;
  margin-bottom: -4px;
  text-indent: -4px;
}
<div>
  <select>
    <option>Test1</option>
    <option>Test2</option>
    <option>Test3</option>
    <option>Test4</option>
  </select>
</div>

I am constantly getting:

enter image description here

But hoping for:

enter image description here

EDIT:

The above snippet appears on Firefox about what I want, BUT not on Chrome. Chrome keeps it with the spaces between. If you have an answer for Chrome, would be grateful.

Felix
  • 1,662
  • 2
  • 18
  • 37
  • 2
    You could keep wrestling with this, however you're attempting to style a native UI element outside the scope of the page DOM. Instead what most people do is re-create the drop-down using an absolute div for full control. This comes with the advantage that your drop-down will appear and behave the same everywhere. – Kalnode Dec 18 '21 at 22:11
  • 1
    You are trying to edit the default browser style, admitted that you will be able to change the appearance in a browser, it's very unlikely it will work in any other browser. I advise you to create your own select, using just a bit of CSS and Javascript. Otherwise use a library like material or bootstrap – Christian Vincenzo Traina Dec 18 '21 at 22:12
  • 1
    References: https://developer.snapappointments.com/bootstrap-select/examples/ https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element – Christian Vincenzo Traina Dec 18 '21 at 22:14

0 Answers0