Styling Dropdown Forms

[mcmlxxx8]

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)

[garymichael1313]

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:

Dropdown Default Styling | CSS-Tricks

Advanced styling for HTML forms

How to style a <select> dropdown with CSS only without JavaScript?

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

Support for styling form select, radio, and checkboxes (and other default browser styles)

Question regarding select choices on a form. I need to be able to style the choices with the same flexibility as the Dropdown. For example, the dropdown options have a good height for mobile and would be easy to touch. Plus you can select each one and customize as you see fit. For Select the choices are not large like the dropdown and I see no way of customizing. Am I missing something?

[mcmlxxx8]

@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

[refinnej]

You guys might be able to find this helpful:

How to Make a Master Stylesheet to Override Browser Styling

[system]

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