Discover the best select websites created by professional designers. Get inspired and start planning your perfect select 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

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 Color

Custom Select Field

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

This works great for menus, especially when you need to add a little emphasis without adding more mess. If you have a restaurant with multiple locations this could come in handy. Or do something entirely different! Hope it helps you in your next project.

Dynamic Background Tabs

Hero Changing Tabs

Veza Digital

Simple, clean tabs section you can use for anything your heart desires.

Welcome to the Universal UI project by Veza Digital!

Every day, we're releasing new elements from our work-in-progress called "The Universal UI". 

The problem that we always have with UI kits is that they're too specific (not easy to use for different types of businesses), and that while often beautiful, they have a number of custom-designed images that makes replicating the beauty of the kit a time consuming process at best.

That being said, this is going to be a completely free, comprehensive UI kit that is made to be used for any type of business, and is as easy to edit/clone elements as a UI kit should be.

Tabs 01

Cloneable Tabs Section

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 💔)

Dropdown form with all of the states listed, using the Client-first naming convention by Finsweet. Created by Titan Studio

https://twitter.com/ZaChristensen__
https://www.titanstud.io/

State Dropdown Form by Titan Studio

state-dropdown-form

Memberstack

Lots and lots of custom Webflow checkboxes. I tried to limit the amount of custom CSS I was using, but couldn't help it for some. If you have any questions please email duncan@memberstack.com and I will get back ASAP. 

Discover select websites built by the Webflow community

Discover select websites built by the Webflow community