How to hide the auto generated border of <select> dropdown menu with CSS?

I have fully hidden my select options display: none; as I am using a Customized element as an other select. For multiple reason I need it to work this way.

The issue is the following dropdown rounded border/bubble is still showing when I click the select element. I have tried on multiple browsers and the same appears:

(Don’t mind the white background with "Whisky" word, that’s actually my 2nd element that acts as a fully customized select.)

When I click anywhere, even on the Console source it disappears.

Is there any way to make this completely disappear with CSS?
Or do I need to re-create an element that’s not a <select> tag?

So far I have tried these and not working:

#product-select option{
  display: none;
  opacity: 0;
  position:absolute;
  left: -9999px;
  visibility: hidden;
}

Might be a duplicate question of Select menu option border none that is looking to remove the border of the select element. If yes please close.

PS: been a while since posted here as an OP, don’t grill me 😉

Cheers