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
2
Answers
Answer
Sadly we can not do that.
Demo
Check it out here. It’s an old answer of mine. It shows some of the things we are able to customize. But that border is not customizable by CSS. We have no access to it.
try outline:unset; usually it is not border but its outline.