On the current project some time ago there was a task to unify selects in all browsers. It was necessary to change them so that with the same display, they externally remained close to the standard but at the same time had the possibility of flexible adjustment by means of CSS. After searching the finished libraries, at that time I did not find anything suitable and decided to make my own. Took as a starting point the design close to the standard, plus the replacement of the scrollbar, from the standard system to its own, also the same in all browsers. Implemented script as jQuery plugin. The required jQuery version is 1.5+. The mechanism of operation is as follows:
Standard select is completely hidden
In its place, a bulleted list is created, which is populated with elements of the list with the value attribute, which stores the number of the option element from the select. Thus, when you click on li, according to the parameter in value, an option is selected in the hidden selection.
In that case, if the pseudoselect content is greater than the specified visible area, then a scrollbar is added to the list (also jQuery plugin ScrollBar.js).
The appearance of the scrollbar can be changed in the selectimus.css style file, where you can also change the image of the buttons to scroll up and down. (Options for scrollbar design in development).
')
Plugin features:
Maximum proximity to the standard, but the same in all browsers, select, by default.
Styling selektov with css. The style (Object) parameter is passed during initialization.
Additional adjustment by adding width, height and setting the number of lines of the expanded list of selekt.
Navigate using the keyboard.
Plugin initialization:
$([elemenet]).selectimus([style] [, options])
When initializing the plugin, if no additional style parameters are passed, the default styles are applied:
Replaces the standard scroll bar in the elements on the page, to which the overflow: hidden property is applied, to the universal one in all browsers. Now works only with vertical content. In the development is also the possibility of adding options to customize the appearance of the scroll bar.