JQuery plugin overview for styling selects

Every coder at least once argued with the designer about non-standard form elements. But since the developers have come up with solutions for non-standard selects, then let's consider them and put everything on the shelves.

It is no secret that standard selects have an extremely weak level of styling with CSS. In some browser they are a little better, in some slightly worse, but the overall picture is very sad. As usual, where pure HTML + CSS can't cope, jQuery comes to the rescue.

There are really quite a few plugins for replacing selects, but I still want to take a closer look at them. In this article I would like to highlight the features of each of the plug-ins. Their number is really huge, so the review does not pretend to be complete (but I will sort out the most basic plugins). , Perhaps, from the simplest.
')

Standard select

Advantages:

• Works on all devices, including mobile phones
• automatically adjusts the width
• no problem controlled by jQuery
• always opens on the visible part of the page (the so-called "smart positioning")
• he determines the optimal height for the drop-down list
• allows you to group options
• allows you to select several items at once (unless, of course, you prescribe the necessary attributes)
• reacts to tab transition
• has a pick on the first letter
• supports scroll wheel mouse

Disadvantages:

• look in all browsers in different ways
• can not be normally stylized

Select Box Factory 2

Really big plugin with tons of options.
Volume: 29KB
Additional functions: (this plugin has a lot of them, I will give the main ones)

• autocomplete
• supports multi select
• supports any stylization of any field (including images inside points)

Requirements:

• jQuery 1.2.6+ (jQuery 1.5.1 also works)

Advantages:

• can be customized as you please

Disadvantages:

• with disabled scripts it turns into a pumpkin absolutely useless
• does not replace selects, but creates its structure with divs
• difficult to install and configure
• does not have "smart" positioning
• has multi select (but on poppies instead of clamping cmd, you have to press shift)
• does not respond to Tab

jQuery Searchable DropDown Plugin

Hybrid select'a and autocomplete'a. Based on the standard select, that is, it has almost all its advantages and disadvantages.
Volume: 12KB
Additional functions:

• autocomplete

Requirements:

• jQuery 1.3.2+ (on jQuery 1.5.1 also works)

Advantages:

• has all the advantages of a standard select
• works with js disabled
• simple and straightforward to set up

Disadvantages:

• In IE6, autocomplete does not work as it should, although the select itself remains usable.

jQuery Custom Select Box

A specific plugin, it is better to look at an example. Does not hide selected items, leaving them visible.
Volume: 8KB
Additional functions:

• You can adjust the height, width, scroll, speed and opening effect

Requirements:

• jQuery 1.3.2+ (on jQuery 1.5.1 also works)

Advantages:

• very easy to install
• pretty easy
• has multi select

Disadvantages:

• need a wrapping div
• does not work in IE6 (sprawls across the page)

jQuery custom selectbox

Simple and easy plugin, which, unfortunately, has some drawbacks.
Volume: 3KB
Additional functions:

• disable the plugin

Requirements:

• jQuery 1.2+ (on jQuery 1.5.1 also works)

Advantages:

• has a small volume
• easy to install
• can turn smoothly

Disadvantages:

• opens only when clicking on the arrow
• can't group options
• there is no possibility to select several items
• does not know the switch arrows on the keyboard
• cannot set the height of the drop-down list
• there is no "smart positioning"
• clicking on tab doesn't know
• does not support IE6 (although a very minor revision of the CSS solves this problem)

jQuery Selectbox plugin

Simple substitution of select. The plugin is useless due to flaws.
Volume: 8KB
Additional functions:

• Implemented standard functions of regular selects.

Requirements:

• jQuery 1.4+ (jQuery 1.5.1 also works)

Advantages:

• easy to install
• has custom appearance effects

Disadvantages:

• does not work in IE6 and IE7
• if the select fails at the bottom of the page, then nothing will come out at all

jQuery SelectBox Plugin

Almost perfect plugin.
Volume: 16KB
Additional functions:

• Implemented standard functions of regular selects.

Requirements:

• jQuery 1.4.4+ (jQuery 1.5.1 also works)

Advantages:

• very easy to install
• really crossbrowser
• offers a very cool description of the plug-in and the "sandbox"
• has a multi selector
• has subgroups
• you can disable options
• auto-fit width
• reacts to Tab
• reacts to the keyboard and scroll arrows

Disadvantages:

• small bugs in IE6
• no smart positioning

jquery.sb.js Selectbox Replacement

It looks like the previous one, and even surpasses it in some parameters.
Volume: 20KB (along with additional scripts)
Additional functions:

• Implemented standard functions of regular selects.
• You can alt insert any markup inside options (including the number of pictures)

Requirements:

• jQuery 1.3.2+ (on jQuery 1.5.1 also works)
• jquery.ba-throttle-debounce.min.js
• jquery.tie.js

Advantages:

• very easy to install
• there is a multi-select
• there are subgroups
• you can disable options
• auto-fit width
• reacts to Tab
• reacts to the keyboard arrows
• reacts to scrolling

Disadvantages:

• does not work in IE6, just leaves standard
• does not know "smart positioning"
• hard to use without a standard description

Plug-ins that at the current stage of their development are not worthy of our attention:

• CCombo (without support for IE6 and IE7, while not remaining standard)
• Custom Select Box CSS Style Plugin: jQuery + CSS (does not work in IE6, just leaves the standard, only stylizes the captive part of the select)
• jQuery - Skinning HTML Select Boxes (does not work in IE6, buggy in FF and Safari)

findings

• Before you decide to use stylized selects, be sure to evaluate whether you really need it.
• Be sure to test the work of selects with js disabled. This will save you a lot of nerves, especially if there is an error somewhere else, and the selections are not loaded.
• Be sure to turn off all this beauty for mobile reflectors, as it doesn’t look so beautiful in them. For example, iPhones have very conveniently designed selections. In order to select the desired item does not necessarily infuriate the user with zoom and other perversions.
• If you decide to use stylized selects on mobile phones, note that most of them do not understand overflow: scroll, that is, the user simply does not see the menu items to scroll to (if the plugin does not display a standard drop-down list). All other selects on mobile phones are suitable only for short lists that definitely do not need scrolling.
• Many plugins use float: left (as opposed to standard ones, which can be inserted inline). Of course, any plug-in can be finished in order to be inserted inline, but this will take time.

I think the disadvantage of the plugin is that it does not work in IE6, but for many it does not matter. Personally, I am of two plug-ins that are identical in functionality, in any case I will choose cross-browser.
Volumes of plug-ins are indicated only for their js-part (and compressed).


This review is a sample of the pen. Hopefully, it will be useful for the habrasoobschestvu. Comments and additions are welcome.

upd
Plugins that habrayuzer advised:

• cuSel is a pretty good plugin, it is actively developing. No smart positioning, keyboard navigation issues, no optgroup support (advised Shuichi )
• Sexy Combo is a really cool plugin, even smart positioning is there, but very slow, judging by the reviews. It reacts very badly to lists with more than 100 items. Development is stopped (but there is a fork , which, apparently, is developing) (advised frog , in his comments a whole bunch of different plug-ins for styling selekt)

Combines that replace all form elements:

• Uniform - even replaces file upload fields, has several plug-in themes, but it also has flaws . (advised skipfish )
• jqTransform - about him already wrote on Habré. Judging by the comments, it has a lot of bugs. (advised skipfish )
• Niceforms is a beautiful plugin, but arrow navigation does not work, there is no clever positioning, ie6 does not support, the latest version is from 2008. (advised Defite )