Discover the best select-field websites created by professional designers. Get inspired and start planning your perfect select-field web design today!

Update 02-12-2020:
-Added color variable for list option (in dropdown) text color on hover
-Added color variable for selected option text color that displays in the field after it's selected

A cloneable project using the Nice-Select JQuery plugin to style and customize a <select> field in your Webflow project.

I made the customization process really easy. In the Navigator you will see a custom code element called "style-settings". Open that up and you will see the different options for Color and Spacing. Comments are used as well so you know which does what. Simply copy and paste in your own color and spacing values. 

Last, we need to initiate the the plugin by copying the simple script code that is located in the Page Settings > Custom Code > </body>. You can also add that code and the <style> code to your Sites Settings Custom Code (global) so it translates across your entire site for all forms that have a <select> input field.

Hope you dig it and of course I hope it helps!

Custom Select Fields

Free list of 257 countries of the world, this input together with the list you can copy to your project. I hope this will save your time.

This project is available for cloning, as a thank you, please put a Like, as well as see my other projects.
By webflow-experts.com

World Countries in a form list

Pre-filled list of countries of the world for webflow form

Hey Friends!

Adding a date field doesn't have to be tricky. Here's one that you can add in 30 seconds, and it includes some of the basic styles to help you customise it.

Oh, it will also inherit the sites <body> typography, so if you want it to match your sites vibe, please be sure to have that selected.

You can find the code in the page settings, and utilise it by adding the custom attribute that you'll find on the demo input field.

For the full guide, visit flowbase.co

-------------

Discover the world's largest collection of Webflow components.

⭐ flowbase.co/explore

Instantly copy from our huge library with a single click. Premium components that help you solve problems faster. 

Become a member today!
⭐ flowbase.co/club

Webflow Date Picker

The Good Web Host

A clonable project created to help you save time when developing forms on Webflow!

With this project, you can copy-paste a custom code element with a <select>
tag with all the countries in the world!

You have three options: 
1. With Emoji Flags
2. Without Emoji Flags
3. Without the Nice Select

DISCLAIMER: the countries are loaded in with JS - so you wouldn't be able to see them on Webflow however when you publish - Voilà!

🎁 Freebie Country Dropdown

country-dropdown-by-good-web-host

Multiple selection functionality without using CRTL key with customized design for options in select2!

Codepen: https://codepen.io/wripcode/pen/ZEvMOEL

I don't know why Webflow converts select tag to dropdown list in mobile version so dropdown list but with customized tags.
Fully responsive!

Select2 custom multiple selection form

Multiple selection option using customized select2 for Forms

Created this to test the current possibilities and limitations of Finsweet's Attributes system (which, 💜, incidentally). For my use case, I really needed to combine multiple collections and filter by field data from multiple multi-reference fields in each collection. I also used Select to add filter options to select fields. It works, natively! No custom JS needed. (My main takeaway for me was to TRIPLE check all my attributes for misspellings, I have a bad habit of fat-fingering, and 1 misspelling could break it all.) Thanks a million, Finsweet! 🙏  

UPDATE: this no longer works 💔

Finsweet Attributes: Using Combine, Nest, Filter, & Select together

Finsweet Attributes: using Combine, Filter, Nest, and Select together (UPDATE: this no longer works 💔)

We created a super simple and clean website. The two main challenges:
1. Making a very simple navigation
2. Determining whether to use templated pages for the services or individual pages with Dynamic List. We went the second option :>

Check it out and let us know what you think!

Universal Select, INC.

universal-select-inc

An example of how you can use a select element in a form to populate a hidden field.

Discover select field websites built by the Webflow community

Discover select field websites built by the Webflow community