Streaming live at 10am (PST)

Gradient Style on Form Element - Select Dropdown?


#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? smile
https://css-tricks.com/dropdown-default-styling/
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 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


#3

Oh! And this might as well smiley
http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/


#4

And this: http://bavotasan.com/2011/style-select-box-using-only-css/ blush


#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


#6