▼
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.

20180207_135202
20180207_135202.jpg1592x909 419 KB

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

703c63a5-9514-4e43-a0f6-37745d8a319a
703c63a5-9514-4e43-a0f6-37745d8a319a.png945x818 667 KB

FireFox Mobile
Straight-edge Corners, No Inner Shadow Effects

5ee25052-54c0-4095-bdc6-a54f8f05f181
5ee25052-54c0-4095-bdc6-a54f8f05f181.jpg1440x2792 711 KB

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

4ce320e3-2a38-4313-9a85-40d2e115bd74
4ce320e3-2a38-4313-9a85-40d2e115bd74.jpg1421x1651 468 KB

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

4b23c4db-b931-4209-91ed-74b5c5a1d28c
4b23c4db-b931-4209-91ed-74b5c5a1d28c.jpg1738x1529 577 KB

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: