Remove select bottom and top white space when background is transparent

Question

So, I have styled my select & the option menu to make it look like this.

body {
   background-color: #1A1C1E;
}

select {
  color: white;
  background: transparent;
  border: 1px solid gray;
  border-radius: 7px;
}

select option {
  color: white;
  border-color: #212529;
  background-color: #212529;
}

<select name="state" class="p-2 pe-3" id="timeline">
  <option value="5">24 Hours</option>
  <option value="25">1 Week</option>
  <option value="50">1 Month</option>
  <option value="100">3 Months</option>
</select>

The issue is that there is some white space on the bottom and top of the option menu when the color of the text is white and the background transparent.

EDIT:
I used the background from the body, the color is still a little bit off but it isn't that noticeable as before.