A repo containing many controls commonly used in front-end web development
Index of Contents
A simple, fully customizable custom
select. Too often I have received designs for web content for clients that include a custom
select in the design. I got tired of writing the CSS and JS to make it look and function the way the designers expected it to look and function, so I created this plugin. This plugin takes the options used in the original
select and generates a
lis and appends that div that is added to the portion of your page specified by the
container option and hides the original
select (however, there is an option to keep the original
select if you really want to). When an element in the custom dropdown is selected the plugin adds the
selected attribute to the appropriate
option in the original
select so you can tell from your back-end code which option was selected in your custom dropdown. I think its worth noting that you can uniquely target each one the custom dropdowns generated with CSS or JS. The class added to each dropdown is "dropdown-[value of name attribute of original select]".
- Include the latest version of jQuery in your project
- Clone the source for
common-compsinto the directory where you would like CSS and JS files to go in with:
git clone https://github.com/ekdevdes/common-comps.git
- After moving the downloaded files into their respective places, the last step is to link them in your html file. Link Custom Dropdown's CSS in
headof your document with:
<link rel="stylesheet" href="/path/to/custom-dropdown.css" />
I recommend put the previous code right after your CSS reset and right before you site-wide or page-specific stylesheet, that way you can customize the appearance of the dropdown generated with your site's or page-specific stylesheet.
- Lastly, link to
custom-dropdown.jsafter your jQuery include with:
Say you have just finished writing this code for your select:
<select name="outlyingTerritoryTwo"> <option value="AS">American Samoa</option> <option value="GU">Guam</option> <option value="MP">Northern Mariana Islands</option> <option value="PR">Puerto Rico</option> <option value="UM">United States Minor Outlying Islands</option> <option value="VI">Virgin Islands</option> </select>
The way you apply this plugin to that specific select is add a
data-dropdown-options attribute to the afformentioned
select. The only necessary option
container which tells the plugin in which to place the generated dropdown. An example is below:
<select name="outlyingTerritoryTwo" data-dropdown-options="container=.after"> <option value="AS">American Samoa</option> <option value="GU">Guam</option> <option value="MP">Northern Mariana Islands</option> <option value="PR">Puerto Rico</option> <option value="UM">United States Minor Outlying Islands</option> <option value="VI">Virgin Islands</option> </select>
This plugin uses the jQuery element selector syntax (e.g.
.after means any element with the class of "after",
#after means any element that has an id of "after", etc.) for telling the
container option where on the page to place the generated dropdown.
It's important to note that there are no quotes used around the selector passed to
container, they aren't necessary and I'm pretty sure it will break the plugin if quotes are used for any of this plugins options.
||The element to place the generated custom dropdown in||Any selector that matches jQuery element selector syntax, without quotes|
||By default, no option in the dropdown is selected. This option determines what text should be on the dropdown as the "selected" value in this case||Any string, without quotes. Default value is "Choose an Option"|
||Set one of the options in the dropdown to be selected automatically when the page loads, useful for pre-loading existing configuration options for a service onto a single page||Any string, without quotes|
||By default when this plugin is applied to the desired
||"keep","yes","true","false", or "no"|
You've seen the syntax for one option above, here is the syntax for specifying multiple options:
<select name="outlyingTerritoryTwo" data-dropdown-options="container=.after, defaultval=Choose a State, selectedval=American Samoa"> ...options... </select>
The space after the comma between option and the case of the option names doesn't matter.
This plugin was designed to be completely customizable via CSS. A few styles need be applied by default to get the custom dropdown looking like a dropdown menu but you can override almost all of these pre-defined styles with your own. Additionally, Below is a list of selectors and what they affect
|Selector||What it Affects|
||The custom dropdown menu when its closed|
||The custom dropdown menu when its closed. However, if you want to remove or change the color of the default black border around the closed-state of the custom dropdown you'll want to apply your
||the arrow that opens the custom dropdown's full option list. The background color of the box the arrow is in can be changed using
||The individual options in the option list, this is the best selector to do things apply a custom
||for layout purposes, the text of each option is wrapped within a
The custom dropdowns generated by the plugin have been designed to be fully mobile-responsive as well, so there's another advantage of using this plugin, mobile-responsive
selects. Lastly, you can uniquely target each one the custom dropdowns generated with CSS or JS. The class added to each dropdown is "dropdown-[value of name attribute of original select]".