Default Mobile Styles

Hi All,

I have noticed that on mobile browsers (Safari and Chrome specifically) certain inputs have stylistic changes. For example, all dropdown menus seem to revert to a default dropdown menu for that browser and text inputs will sometimes randomly add shadows inside these inputs.

For example:
Full Browser:


Mobile Browser:

As you can see, both dropdowns and text inputs are rendered differently.

I do not have these problems on the full computer browser (for either safari or chrome). Has anyone else had this problem and does anyone know how to override this behavior so that my styles apply to the mobile versions of the site as well?

Thanks,
Ryan

Yeah I would like to know the answer too. I find it hard to style dropdowns

I did some searching through the forums and it seems one person had this problem in the past. Im surprised more people haven’t come across this because the default mobile drop downs can definitely interfere with the overall design. Someone suggested using @ZeroqodeSupport’s custom drop down plugin, which is what I will probably do. Other types of inputs do have the same issue but not to the same extent. For example, shadows in the text inputs.

I have the same observation. I don’t think there’s much you can do if you use the default elements as is. I guess you either need to use external plugins or start customising the css yourself to align with your design.