select下拉列表表單可能大家都很熟悉，不過(guò)默認(rèn)的下拉列表表單往往會(huì)讓一些網(wǎng)站覺(jué)得丑陋，同時(shí)用CSS也很難調(diào)整select的樣式。因此許多網(wǎng)站位了做出更符合網(wǎng)站風(fēng)格的select下拉表單，往往會(huì)用JS來(lái)模擬這種效果。
比如我們很熟悉的土豆網(wǎng)，淘寶商城和亞馬遜都是用JS做的下拉列表表單。
這樣做的結(jié)果很明顯在視覺(jué)上與網(wǎng)站整體風(fēng)格統(tǒng)一，并且下拉列表樣式很漂亮，不過(guò)也帶來(lái)了一些不良反應(yīng)，因?yàn)橛肑S來(lái)做的，所以會(huì)碰到許多預(yù)想不到的效果，下面通過(guò)測(cè)試者三個(gè)網(wǎng)站我們一一來(lái)分析他們各自的缺陷：
土豆的搜索類別選擇框，每次點(diǎn)擊都讓我覺(jué)得怪怪的：
1. 點(diǎn)擊后，彈出列表的位置與預(yù)期不同。潛意識(shí)里是下拉列表，結(jié)果土豆給了我一個(gè)“中拉列表”。
2. 習(xí)慣性地用上/下鍵選擇，結(jié)果卻讓整個(gè)頁(yè)面滾動(dòng)。
3. 一怒之下，想關(guān)閉不用了。按下 ESC 鍵，卻沒(méi)有任何響應(yīng)。
4. 禁用 JS 后，完全不可用。
類似，淘寶商城也是看起來(lái)很美：
除了第 1 點(diǎn)，其它都和土豆一樣，可訪問(wèn)性和可用性都存在問(wèn)題。
解決辦法很簡(jiǎn)單，采用原生的選擇框即可，比如 Amazon 的：
為什么不鼓勵(lì)在 Web 頁(yè)面中使用自定義選擇框呢？
Select 選擇框是一個(gè)非常成熟的交互控件。成熟意味著用戶很容易接受，但成熟也意味著對(duì)各種用戶都考慮很周全，有著非常豐富的交互細(xì)節(jié)。比如：對(duì) PgUp/PgDn, Home/End 等鍵盤操作的響應(yīng)，以及在不同位置能自動(dòng)調(diào)節(jié)下拉列表的彈出方向等等。
采用 JS 來(lái)模擬選擇框，需要大量的工作和細(xì)致的測(cè)試。即使公司愿意投入，也依舊無(wú)法實(shí)現(xiàn)原生控件的某些特性。比如：上面 Amazon 的選擇框，我把瀏覽器拉到很矮，這時(shí)下拉列表能伸出到瀏覽器外面去。
為了一丁點(diǎn)“視覺(jué)小甜點(diǎn)”，讓交互喪失了如此多的實(shí)用細(xì)節(jié)，還得耗費(fèi)前端程序員的大量時(shí)間，結(jié)果卻費(fèi)力不討好，實(shí)在是很糟糕。
PS：要使用自定義選擇框，得滿足以下條件：
1. 像 google 一樣瘋狂，愿意花費(fèi)大量時(shí)間和資源。
2. 像 google 一樣細(xì)致，要做就做好，要模擬就模擬透。
3. 在 web app 上應(yīng)用。
可惜，在國(guó)內(nèi)，像 google 或 facebook 一樣瘋狂和細(xì)致的公司，還沒(méi)出現(xiàn)。
