Feb 28, 2022

Designing Custom Form Dropdowns in Webflow

Nikolai Bain Profile Picture

By Nikolai Bain

Designing Custom Form Dropdowns in Webflow
Designing Custom Form Dropdowns in Webflow

Prefer video?

Watch the video version of this blog post on my Youtube channel.

Watch Video 

Webflow's form dropdown component (as will most other website builders) simply adopt the design of whatever browser it's currently being viewed on. You'll find on Chrome that this is less of an issue, but on Safari, the design is a lot more jarring.

You won't be able to customise this properly with only the built in Webflow settings, as this is controlled from the level of the browser. Because of this, if we want to have a consistent look and feel across your website, and therefor make the style fit in line with the rest of the form elements, we have to add custom code.

Rather than try to figure everything out ourselves, we can use jQuery Nice Select, a lightweight code snippet that will enable us to fully customise the dropdown.

As we aren't going to add in the plug-in, we are instead going to add some custom code that does the same thing. You can either add this custom code to the page settings of the page you are adding the dropdown on, or to the project settings custom code tab if you are using it on many different pagers.

Webflow Templates Cover

Don't want to build from scratch?

Start with a Webflow template and have your new website up in no time.

Here's the javascript to enable the custom dropdown element:

<script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js>"></script>
$(document).ready(function() {

Hold your breath for this next bit, it's a lot of code!

Here's the css to style our dropdown element:

:root {/* ----------- Colors ----------- */
 --list-bg-color: #ffffff;
 --list-text-color: inherit;
 --select-field-arrow-color: #546E7A;
 --list-item-bg-color: #F0F2F4;
 --border-color-hover: #37474e;
 /* ----------- Spacing ----------- */
 --select-field-padding-left: 15px;
 --select-field-padding-right: 15px;
 --list-padding-top-bottom: 10px;
 --list-max-height: 200px;
 --list-item-padding-left: 18px;
 --list-item-padding-right: 18px;
 --list-item-min-height: 40px;
 --list-item-line-height: 40px;

.nice-select {
 box-sizing: border-box;
 clear: both;
 padding-left: var(--select-field-padding-left);
 padding-right: var(--select-field-padding-right);
 padding-top: 12px;
 position: relative;
 text-align: left !important;

.nice-select:hover {
 border-color: #CFD8DC;
 border: 1px solid #CFD8DC;

.nice-select:active, .nice-select.open, .nice-select:focus {
 border-color: #CFD8DC;
 border: 1px solid #CFD8DC;

.nice-select:after {
 border-bottom: 2px solid var(--select-field-arrow-color);
 border-right: 2px solid var(--select-field-arrow-color);
 content: '';
 margin-top: -4px;
 display: block;
 height: 5px;
 pointer-events: none;
 position: absolute;
 right: 12px;
 top: 50%;
 -webkit-transform-origin: 66% 66%;
 -ms-transform-origin: 66% 66%;
 transform-origin: 66% 66%;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transition: all 0.15s ease-in-out;
 transition: all 0.15s ease-in-out;
 width: 5px;
 z-index: 100 !important;

.nice-select.open .list {
 opacity: 1;
 pointer-events: auto;
 -webkit-transform: scale(1) translateY(0);
 -ms-transform: scale(1) translateY(0);
 transform: scale(1) translateY(0);
 z-index: 200;

.nice-select.right {
 float: right;

.nice-select.right .list {
 left: auto;
 right: 0;

.nice-select.small {
 font-size: 14px;
 height: 36px;
 line-height: 34px;

.nice-select.small:after {
 height: 4px;
 width: 4px;

.nice-select.small .option {
 line-height: 34px;
 min-height: 34px;

.nice-select .list {
border: 1px solid #CFD8DC;
width: 100%;
 font-size: 15px;
 background-color: #ffffff;
 color: var(--list-text-color);
 box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
 box-sizing: border-box;
 border-radius: 2px;
 opacity: 0;
 overflow: hidden;
 padding: var(--list-padding-top-bottom) 0px;
 pointer-events: none;
 position: absolute;
 top: 100%;
 left: 0;
 overflow-y: scroll;
 overflow-x: hidden;
 max-height: var(--list-max-height);
 z-index: 999 !important;

.nice-select .option {
 cursor: pointer;
 font-weight: 400;
 font-size: 15px;
 line-height: var(--list-item-line-height);
 list-style: none;
 min-height: var(--list-item-min-height);
 outline: none;
 padding-left: var(--list-item-padding-left);
 padding-right: var(--list-item-padding-right);
 text-align: left;
 -webkit-transition: all 0.2s;
 transition: all 0.2s;
margin-bottom: 0;

.nice-select .option:first-child {
display: none;

span.current {
color: var(--list-text-color);

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
 background-color: var(--list-item-bg-color);

Add these both to the "Before </body> tag" section.

Feel free to publish to your staging domain and see how the default custom style looks so you know what you are working with. You won't be able to see it update in the designer, so you will have to check the staging domain you're using each time you make an update.

Here is the dropdown on safari now:

Now it's looking more in-line with the rest of our form elements.

From here, you can update the styling in the custom css until it properly fits the rest of your form elements, giving you a more consistent and professional look no matter what browser your website visitors are using. There might be a little bit of trial and error through this process, but the main styles that you need to focus on are the colours.

If you managed to work through all this custom code without breaking a sweat, you can add other custom code snippets that take your website to the next level.

Nikolai Bain Profile Picture

Written by

Nikolai Bain

I'm a Webflow professional partner and template designer who helps users learn to use Webflow better.

More about me

Written by

Uday Tank

Uday Tank is a serial entrepreneur and content marketing leader who serves the international community at Rankwisely. He enjoys writing, including marketing, productivity, business, health, diversity, and management.

More about Rankwisely

Ready to learn more?

I've worked with countless businesses around the world. Maybe you'll be next.

Get in Touch