What's wrong with the dropdown menus? Topic is solved

[[ghost]]

The dropdown menus on this page look a little bit weird on Pale Moon vs Firefox. What's causing this issue?

dropdownonfirefox.png

dropdownpalemoon.png

[Moonchild]

To quote someone:

"The select element is part of the operating system, not the browser chrome. Therefore, it is very unreliable to style, and it does not necessarily make sense to try anyway."

If you still want to try anyway, using just CSS, then you have to make sure you add specific CSS rules to disable the standard appearance:

Code: Select all

-moz-appearance: none;
-webkit-appearance:none;
appearance:none; 

which should work in all current versions of all browsers (except maybe MSIE?).

I don't know what WordPress uses to style these drop-downs but I'm guessing they are missing some of these rules.

[[ghost]]

To quote someone:

"The select element is part of the operating system, not the browser chrome. Therefore, it is very unreliable to style, and it does not necessarily make sense to try anyway."

If you still want to try anyway, using just CSS, then you have to make sure you add specific CSS rules to disable the standard appearance:

Code: Select all

-moz-appearance: none;
-webkit-appearance:none;
appearance:none; 

which should work in all current versions of all browsers (except maybe MSIE?).

I don't know what WordPress uses to style these drop-downs but I'm guessing they are missing some of these rules.

OK, thank you!

[Moonchild]

Off-topic:
Please don't quote the message if you are directly responding to it in the next post.

As a follow-up, it's likely that WordPress is only using the -webkit- prefixed one, because Edge and Firefox are accepting this Blink-specific keyword as aliases (so it would work on them only using -webkit-* and not stating -moz-*). I've made a change in UXP to follow suit for web compatibility reasons, although I personally think this kind of thing should never be done for vendor-prefixed keywords.