glebkema / jquery-stylize-select

This plugin adds blocks around the selection field and creates the necessary event handlers. You can stylize the look of these blocks using the CSS. The plugin simplifies website development.

jQuery Stylize Select Plugin

The drop-down list for the select field itself is almost not styled. This plugin adds blocks around it and creates the necessary event handlers. So you can stylize the look of these blocks using the CSS. The plugin simplifies website development.

The CSS file contains only the properties required for the functioning of the drop-down list and the field with the selection result. You need to stylize them yourself.

Inspired by Wallace Erick's CodePen "Custom Select Menu".

The plugin creates 3 blocks and uses 6 style classes

<div class="stylize-select">
	<select class="your-select-field" style="display: none;">
		<option value="apple">Apple</option>
		<option value="banana" selected>Banana</option>
		<option value="carrot" disabled>Carrot</option>
		<option value="grape" hidden>Grape</option>
	</select>
	<div class="stylize-select__styled" tabindex="0">Apple</div>
	<ul class="stylize-select__list" style="display: none;">
		<li rel="apple"  tabindex="0">Apple</li>
		<li rel="banana" tabindex="0" class="stylize-select__selected">Banana</li>
		<li rel="carrot" tabindex="0" class="stylize-select__disabled">Carrot</li>
		<li rel="grape" tabindex="0" class="stylize-select__hidden">Grape</li>
	</ul>
</div>

Option	Default value	CSS class for
classSelect	.stylize-select	main <div> that wraps the original and the blocks we're going to add
classHidden	classSelect + __disabled	the disabled item in the drop-down list
classHidden	classSelect + __hidden	the hidden item in the drop-down list
classList	classSelect + __list	a <ul> that shows the list of the options for selection
classSelected	classSelect + __selected	the selected item in the drop-down list
classStyled	classSelect + __styled	a <div> that shows the selected option

When the drop-down list opens, the styled field gets the .active class. Thus, you can style this state with a combination of two styles. For example, using .stylize-select__styled.active if the website uses the default values ​​for the options.

If the original <select> has no selected option yet, the plugin defines the first option as a selected one.

HTML attributes

The plugin copies the class and style attributes from each <option> tag to the corresponding <li> tag as is.

Also, when the user selects an option, the plugin copies the style attribute from the option to the main field. The class attribute of the option will not be copied.

If <option> tag has the data-html attribute. then the plugin places this HTML as a content of the depending <li> tag.

So you can use images in the layout of options and customize the appearance of these images using CSS properties.

For example, the plugin will turn such HTML source code:

<select class="your-select-field">
	<option value="apple" class="apple-class" style="background-image:url('/images/apple.jpg');">Apple</option>
	<option value="banana" data-html="<img class='stylize-select__image' src='/images/banana.jpg' />Banana">Banana</option>
</select>

into such final code:

<div class="stylize-select">
	<select class="your-select-field stylize-select__hidden">
...
	</select>
	<div class="stylize-select__styled" tabindex="0">Apple</div>
	<ul class="stylize-select__list">
		<li rel="apple" class="apple-class" style="background-image:url('/images/apple.jpg');">Apple</li>
		<li rel="banana">
			<img class="stylize-select__image" src="/images/banana.jpg" />
			Banana
		</li>
	</ul>
</div>

Event handlers

Trigger change event on the select field after updating the value. So your onchange handlers would work too.

Keyboard: Open drop-down list by Space, Enter or Arrow Down. Close drop-down list by second by Space or Enter, by Arrow Up, by Esc (and by click outside). Go to next option by Tab or Arrow Down. Go to previous option by Shift+Tab or Arrow Up. Choose item by Space or Enter.

How to use

1. Include jquery-stylize-select.js in your page.
2. Include jquery-stylize-select.css or use it as a basis for your styles.
3. Create your own style classes.
4. Call the .stylizeSelect() method, passing it the names of the style classes as parameters:

$('.your-select-field').stylizeSelect();

$('.your-select-field').stylizeSelect('.your-main-wrapper-class');

$('.your-select-field').stylizeSelect(array(
	classSelect: '.your-main-wrapper-class',
	classHidden: '.your-class-to-hide-the-original-select',
	classList:   '.your-class-for-the-dropdown-list',
	classStyled: '.your-class-for-the-div-with-the-result-of-select',
));

jquery-stylize-select's Issues

Need tests

• Need to quickly test new features.
• Must automatically verify that old features still work well.

Avoid errors. Check if <select> has no <option> inside

Do not get stuck when using the arrow keys and stumbling into a hidden option

When the first option is hidden and I press the Arrow Down the drop-downlist loses the active item. And can't move up by Arrow Up when the upper option is hidden.

Tab and Shift+Tab work well.

Take into account the attributes `disabled` and `hidden`

It is required:

1. to style the disabled option and to make it unselectable.
2. to hide the hidden option.

Need a standalone development process

I am currently developing a plugin in conjunction with some other project. I want to work with this plugin in a standalone environment.

Use a label for the select field

The original <select> tag is used in conjunction with the <label> tag. But this plugin does not create any blocks with the label content and its functionality.

I usually customize the selection box to use it without any label. But for other users the label may be important. And, of course, if the original select has a label, then this plugin should suggest a way to use the contents of this label.

Also clicking on the label should work.

Provide a way to style the selected list item

It is required to set styles through CSS for the list item that is currently selected.

The selected <option> can be styled through :selected. But the plugin does not pass this property to the corresponding <li> item.

For example, a plugin can add and remove a style class when the user selects a new item from the list. Like .custom-select__selected or something like that.

Change plugin name and function name

There are a few jQuery Custom Select Plugins with the .customSelect() function:

• https://www.npmjs.com/search?q=keywords%3Ajquery-plugin%20custom%20select
• https://kvlsrg.github.io/jquery-custom-select/
• http://adam.co/lab/jquery/customselect/
• https://plugins.jquery.com/CustomSelect/
• https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/

Because of this, users can get confused, and methods can start to override each other.

In addition, this plugin is intended for developers, and not for end users. Therefore, the name of the plugin should create the correct user expectations.

What names best describe the purpose of the plugin and its function?

Do not choose hidden or disabled oprion if there is no selected one and need to auto select something

Currently the plugin uses the first option in such situations. But it may be hidden or disabled.

Provide public methods

It is necessary to make the options selected, hidden / visible and disabled / enabled by special methods from external scripts without knowledge of the CSS classes used by the plugin.

Something like this:

var selectSomething = $('.select-something).stylizeSelect();
selectSomething.getOption('value').makeDisabled();

Or maybe like this:

$('.select-something).stylizeSelect();
$('.select-something).getOption('value').makeDisabled();

Focus disappears after selecting an option in the drop-down list

When I choose an item in the drop-down list by pressing the Space or Enter, Ithe drop-down list closes and... focus dissappeers.

It seems to me that it will be logical and predictable if in such situations the focus moves to the main select field.

In this case the user will be able to continue browsing the web page using the keyboard.

Provide a way to set and style the placeholder

Use data attribute or one of the tricks to dfine the placeholder and to provide its CSS claas.

• Show a Placeholder for a <select> Tag
• Placeholder for an HTML5 <select> Box
• make a placeholder for a select box (severak answers and comments for them)

Make items `disabled` or `hidden` by changing the `<option>` of the original `<select>`

1. Do not toggle style classes of the styled items directly. Instead change the property for the <option> of the original <select>.
2. Update the classes of the item when the properrties of the original <option> have been changed.

Support for the up and down arrow keys in the drop-down list

At present the plugin plays good with keys Tab, Space and Esc.

It would be nice to provide ⬆️ and ⬇️ for wslking up and down throw the drop-down-list

On the main field ⬇️ opens 📜 . On second click ⬇️ leads to the top of 📜.
In 📜 man can walk by ⬆️ and ⬇️ .
On the top of 📜 ⬆️ leads to the main field und closes 📜 by the next click ⬆️ .

Remove the `hidden` style class

Currently the plugin uses 6 style classes. It;s too many, I guess.
And the tole of the hidden class is to add the display:none; property only.

So the plugin can work with the display property and use the ,hide() and .show() methods without any additional style classes.

Change selected option in the origin field when customized select has been changed

The original <select> tag should be kept up to date. When a new option was selected in the customized field, the source <select> should also be updated.

Remove the `style` attribute of the main field if the newly selected option does not have it

And double-check again if there is the same problem for the class attribute.

Need a convenient way to run the plugin

The plugin currently uses too many entities:

• It adds specific CSS class names for inherent CSS properties.
• It is required to call the jQuery method for the selector with the select field that the user wants to style.
• The user can define their own CSS classes for the HTML layout that will be compiled by the plugin.

So, we already have 3 types of CSS classes:

1. define target select \field
2. provide oligatory CSS properties
3. apply user CSS properties

I would like to simplify the start method and to make the final ierarchy of CSS clases more predictable. For example:

• User can start the plugin without JS-code:
  • by adding of specific CSS class name (as Owl Carousel);
  • by adding of specific data attributes (as FancyBox).
• User can define the structure of CSS clases:
  • by the data atributes;
  • by setting of the plugin defaults;
  • by the array of options for the plugin function.

Need the way to use images in the options layout

Let's add the way to use images in the layout of options.

For example, a user may add some of the data attributes to the options of the original selection field. Based on these attributes, the plugin adds some HTML block or style attribute to the resulting list. After that, the user can customize the appearance of these images using CSS properties.

Something like that:

<option value="apple" data-image="/images/apple.jpg">Apple</option>

I prefer to use theese images as a background image. But perhaps someone needs the iamge in the <img> tag or in the some additional HTML block.

<li rel="apple" style="background-image:url('/images/apple.jpg');">Apple</li>
<li rel="apple">
	<img class="custom-select__image" src="/images/apple.jpg" />
	Apple
</li>
<li rel="apple">
	<div class="icon-box">
		<div class="icon-box__image" src="/images/apple.jpg"></div>
	</div>
	Apple
</li>