glebkema / jquery-stylize-select Goto Github PK

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.

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.

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.

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.

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.

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?

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.

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)

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.

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

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.

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 ⬆️ .

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>

It is required:

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

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

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

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

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();