Streaming live at 10am (PST)

Styling Dropdown Forms


#1

Fellow Webflowers,

Does anyone know if there’s a way to style dropdown forms? I tried adding a class, and styling as normal but only with this minimum results.

It appears the only thing I can change is the color. But what if I wanted to change the standard borders from rounded to straight edge or take off the inner glow that comes pre-styled?

Also, dropdown forms seem to render differently on desktop and mobile and from one browser to the next.

Safari Desktop
Rounded Corner, Inner Shadow Effect

FireFox Mobile
Straight-edge Corners, No Inner Shadow Effects

FireFox Desktop Browser on Responsive Mode
Straight-edge Corners, Embossed dropdown arrows

Chrome Desktop Browser on Responsive Mode
Straight-edge and Round Corners, No Arrows

Anyone have clues to why this is so?

Thanks!

Website Share Link

https://preview.webflow.com/preview/playsite-layout?preview=5797e28b9da9df4b693c286a8e7502ac

Single Line Page

playsite-layout.webflow.io/single-line-form


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


How do I add a dropdown selector to a contact form?
#2

Yeah I had a programmer and we had this issue using Visual Studio for an application a while back. Then we were using Telerik controls, and if you know anything about them, it’s top of the line. But even those gave slight little annoying differences. Subtle right borders lines, greys that weren’t really grey, it was crazy. I’m pretty sure you’re gonna need to use Javascript to force all the browser to render that box the same.

  • Or - I definitely would try adding custom code for that element, and force styles with [ !important ]
    It’ll be redundant but it should override the users native browser styling.

  • Another thing - I would remove all the styles in the “Styles Panel” and add the styling into the custom code snippet, then add the javascript with it.

Here’s a few articles for reference:

Oh I just found another Webflow thread on this as well:


#3

@garymichael1313 Thanks! I haven’t really step into the code world just yet. I will eventually but right now thats a little above my skill set. I’m just trying to focus on layouts and the basics of webflow so I can become more fluent. I can see this is going to be journey want to pace it for the long haul.

Thanks for the links too! I’ll bookmark these just in case I really need to hack the system for something other than a test site


#4

You guys might be able to find this helpful:


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.