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 difficult to adjust the style of the select with CSS. Therefore, many websites make select drop-down forms that are more in line with the website style, and often use JS to simulate this effect.
For example, the Tudou.com, Taobao Mall and Amazon are all drop-down list forms made with JS.
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, it will encounter many unexpected effects. Let’s analyze their respective defects through the three websites of the tester:
The search category selection box for potatoes makes me feel weird every time I click:
1. After clicking, the pop-up list is different from what you expect. Subconsciously, it was a drop-down list, but Potato gave me a mid-down list.
2. Use the up/down keys to choose habitually, but the entire page is scrolled.
3. In anger, I didn't need to close it anymore. Press the ESC key, but there is no response.
4. After disabling JS, it is completely unavailable.
Similarly, Taobao Mall also looks beautiful:
Except for point 1, everything else is like potatoes, with accessibility and availability issues.
The solution is very simple, just use a native selection box, such as Amazon:
Why is it not encouraged to use custom selection boxes in web pages?
The Select Select box is a very mature interactive control. Maturity means that users are easy to accept, but maturity also means that they are considerate and have very rich interactive details. For example: response to keyboard operations such as PgUp/PgDn, Home/End, and the pop-up direction of the drop-down list can be automatically adjusted at different positions, etc.
Using JS to simulate selection boxes requires a lot of work and meticulous testing. Even if the company is willing to invest, it still cannot implement some features of native controls. For example: In the above Amazon selection box, I pulled the browser to a very low level, and the drop-down list can be extended outside the browser.
For a little visual dessert, it took so much practical details to make the interaction lose so much time, and it took a lot of time for the front-end programmer, but it was thankless, which was really bad.
PS: To use a custom selection box, the following conditions must be met:
1. As crazy as Google, willing to spend a lot of time and resources.
2. As meticulous as Google, do it well and simulate it thoroughly.
3. Apply on the web app.
Unfortunately, in the country, companies as crazy and meticulous as Google or Facebook have not yet appeared.