Gradient Style on Form Element - Select Dropdown?

Design help General
1

Hi,

It that Webflow gives you some limited ability to style form elements such as text Fields, Radio buttons, Select Drop downs, etc…

In Safari on iOS I am having a problem when applying a gradient to a Select Dropdown as it seems to be covering the arrow widget that usually appears on the drop down right-side by default.

Anyone know if there is a fix for this?

Apparently, you can only see the effects in iOS.

Published Site
http://mobile-nav-test2.webflow.com/

Designer
https://preview.webflow.com/preview/cwl-dropdown-test?preview=39224e94aac62829884bf73bc0407859

2

This might be helpful? :slight_smile:
Dropdown Default Styling | CSS-Tricks - CSS-Tricks
I think that the reason why you can’t see the custom styling that you have applied to your dropdown menu in Safari in iOS, is because it’s being overwritten by the default styling of Apples own “WebKit” (The standards used in the Safari browser) . But it this article it tells you a little more about that :smile:

Hope that I t can be a little helpful! :smile:
Furtheremore you can perhaps google “WebKit default styling dropdown menu” -something like that?.. To find some more on the subject :slight_smile: Hope it helps as said, and by the way your project looks really interesting, and also quite so good looking actually! :smile:

Best to you!
/ Here from Denmark.
Jonatan

1 Like
3

Oh! And this might as well :smiley:
Custom <select> drop downs with CSS3 – Lea Verou

1 Like
4

And this: Style a Select Box Using Only CSS - bavotasan.com :blush:

1 Like
5

Thanks @Jonatan_Ronsholdt… I sorta ran out of time and decided to remove the gradient and just go with a custom background color as it didn’t seem to interfere with the default styling.

But I appreciate your help and your comments. I may implement them in the future.

JFly