Web page custom selection box Select

Everyone may be familiar with the select drop-down list form, but the default drop-down list form often makes some websites feel ugly, and it is also difficult to adjust the select style using CSS. Therefore, in order to make a select drop-down form that is more in line with the style of the website, many websites often use JS to simulate this effect.

For example, the familiar Tudou.com, Taobao Mall and Amazon all use JS to make drop-down list forms.

The result of this is obviously visually unified with the overall style of the website, and the drop-down list style is very beautiful, but it also brings some adverse reactions. Because it is done with JS, many unexpected effects will be encountered. Let's analyze their respective defects one by one through the test of three websites:

Tudou ’s search category selection box makes me feel weird every time I click on it:

1. After clicking, the location of the pop-up list is different than expected. Subconsciously, I thought it was a drop-down list, but Tudou gave me a "middle drop-down list".
2. Use the up/down keys to select items out of habit, but the entire page scrolls instead.
3. In a fit of anger, I want to shut it down. I pressed the ESC key, but nothing happened.
4. After disabling JS, it is completely unusable.

Similarly, Taobao Mall also looks beautiful:

Except for point 1, the others are the same as Tudou, with problems in accessibility and usability.

The solution is simple , just use the native selection box, such as Amazon 's:

Why is the use of custom select boxes in Web pages discouraged?

The Select box is a very mature interactive control. Maturity means that users can easily accept it, but maturity also means that various users are carefully considered and there are very rich interactive details. For example: responding to keyboard operations such as PgUp/PgDn, Home/End, and automatically adjusting the pop-up direction of the drop-down list in different positions, etc.

Using JS to simulate a selection box requires a lot of work and careful testing. Even if the company is willing to invest, it still cannot realize some features of native controls. For example, in the Amazon selection box above, I pulled the browser very low, and the drop-down list can extend out of the browser.

For a little bit of "visual dessert", the interaction loses so many practical details and a lot of time of front-end programmers is wasted, but the result is a thankless task, which is really terrible.

PS: To use a custom selection box, the following conditions must be met:

1. Be as crazy as Google and willing to spend a lot of time and resources.
2. Be as meticulous as Google. If you want to do something, do it well. If you want to simulate something, simulate it thoroughly.
3. Apply on web app.

Unfortunately, in the country, there is no company as crazy and meticulous as Google or Facebook.