Replacing default browser selections

Selectimus

On the current project, some time ago, the task was to unify selects in all browsers. It was necessary to change them so that, with the same display, they externally remain close to the standard ones, but at the same time have the flexibility to customize using CSS. After searching for ready-made libraries, at that time I did not find anything suitable and decided to make my own. I took a design close to the standard as a starting point, plus replacing the scrollbar from the standard system to my own, also the same in all browsers. The script is implemented as a jQuery plugin. The required jQuery version is 1.5+.

The mechanism of work is as follows:

• Standard select is completely hidden
• In its place, a bulleted list is created, which is filled with list elements with the value attribute, which stores the number of the option element from the select. Thus, when clicking on li, according to the parameter in value, option is selected in the hidden select.
• In that case, if the content of the pseudoselect is larger than the specified visible area, then a scrollbar is added to the list (also the jQuery plugin ScrollBar.js).
• The appearance of the scrollbar can be changed in the selectimus.css styles file, there you can also change the image of the buttons to scroll up and down. (Options for designing a scrollbar in development).

Plugin features:

• The closest proximity to the standard, but the same in all browsers, select, by default.
• Styling selects using css. The style (Object) parameter is passed during initialization.
• Additional customization by adding width, height and setting the number of lines of the expanded select list.
• Keyboard navigation

Plugin initialization:

	$([elemenet]).selectimus([style] [, options])

When the plugin is initialized, if additional style parameters are not passed, the default styles are applied:

• color: '# 000',
• background: '#FFF',
• color_up: '#FFF',
• background_up: '# 7EA0FA',
• display: 'inline-block',
• 'border-width': '1px',
• 'border-style': 'solid',
• 'border-color': '# b6b6b6',
• 'border-radius': '5px',
• margin: '3px 0',
• position: 'relative',
• overflow: 'visible'

Sources are here.
Demo page with description here.

ScrollbarJS plugin

Replaces the standard scroll bar in elements on the page to which the overflow: hidden property is applied, with a universal one in all browsers. Now it works only with vertical content. The development also includes the ability to add options to customize the appearance of the scroll bar.

Sources are here.

Perhaps someone will come in handy such an implementation.

UPD: Thanks to everyone for the comments. I will finish the flaws)