Select options Is not rendered correct on Mobile

Wappler General How To
#1

Hey guys,

Just noticed on my web project that viewing on mobile, all the select elements are not rendered correctlly…
I mean the options are not visible at all!

Then I thought of trying on w3schools.com to see what I get and I get the same behavior:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

viber_image_2024-04-18_09-54-11-402
viber_image_2024-04-18_09-54-11-402738×1599 77.5 KB

So, this is not MY CODE neigher my css…
It is related to my android device (?) or I don’t know what else…

I would like all my select elements to be viewable so users can understand what they selecting…
Can somebody point to the right direction on solving this?

Thanks in advance

#2

Are you sure your device is not in some kind of accessibility mode?
Looking at the little guy icon bottom right it looks like that.

#3

No, it is in normal mode…
This guy-icon on the bottom-right opens a quick-access panel (power, google, volume, screenshot etc)
:confused:

#4

And this happens in all browsers?

#5

yes…

It is clear that is MY ANDROID device brother!!
I’m sorry to bother you with this issue…
But maybe this can happen to user of my site so I would like to know how to solve it

#6

OK… I got it.

It was the f***ing theme…
Removed it and select options work as it should.

Thanks brother!

#7

I still think there might be some accessibility or display settings related to web content or some “Force Dark Mode” settings or some custom color settings (color inversion, high contrast mode, color correction).

#8

Obviously you mean settings on the mobile device…Correct?

#9

Yes :slight_smile:

1 Like