Designing Custom Form Dropdowns in Webflow

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.

Using jQuery Nice Select

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.

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>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>

‍

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

The Code

Here's the css to style our dropdown element:

<style>
: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);
}
</style>

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.