讓我們從一個真實的“栗子”開始。視覺設(shè)計師提供了一張設(shè)計稿：
作為前端同學，我在收到稿子的一瞬間，其實內(nèi)心各種想法交織: 這樣設(shè)計很好看，只是需要模擬控件，看樣子還要切圖，下拉效果也是要模擬的，最重要的是要考慮兼容性，此外做完還要留下詳細文檔解釋用來與團隊溝通。 這樣的模擬需要在兼顧實現(xiàn)設(shè)計的同時，還要保證網(wǎng)站的性能和可用性。這時我不禁開始懷念那些看起來平凡卻非常實用的原生表單控件。如果用他們幾乎可以解決以上所有問題。 一、說服設(shè)計師用原生控件，原生控件好處一籮筐 我們從美觀性、易用性、可用性、愉快感、忠誠度等幾個維度對一個web產(chǎn)品評價，美觀是其中的一環(huán)， 但是更好的功能實現(xiàn)、更高的效率會比華而不實的設(shè)計更加有利于產(chǎn)生愉悅的用戶體驗。 1.1 節(jié)省團隊溝通成本
原生控件自身屬性豐富，比如單選、復(fù)選框的不可選狀態(tài)，輸入框的不可輸入狀態(tài)等，可以直接開發(fā)使用，而不用像模擬控件，需要用樣式模擬，增加工作量的同時增加各個環(huán)節(jié)的溝通成本。
1.2 兼容性
使用原生控件在各個瀏覽器都有非常高的兼容性，同時表單控件會根據(jù)各個瀏覽器的默認設(shè)置顯示相應(yīng)的視覺風格，也會根據(jù)在實際的不同狀態(tài)做默認的相應(yīng)變化。這樣有效避免了模擬控件中包括對位置、狀態(tài)等等判斷和控制。
1.3 可用性
關(guān)愛有障礙的人士是我們的社會責任，作為前端開發(fā)者，我們也致力于為有障礙的人士提供更好的上網(wǎng)體驗。原生控件的特性更好地支持鍵盤操作，tab切換，快捷鍵等功能，這樣有助于視覺障礙用戶使用讀屏軟件等等輔助工具對網(wǎng)頁訪問。
1.4 體驗一致性
此外，跨平臺開發(fā)比如在日趨火熱的移動端開發(fā)，原生控件可以調(diào)用瀏覽器調(diào)用手機的控件，保證了跨平臺的體驗一致性；同時可以適應(yīng)響應(yīng)式設(shè)計，兼容多種終端設(shè)備。
1.5 美觀性
還在擔心沒辦法自定義原生表單控件的外觀嗎？Webkit給我們提供了這種可能，它允許重新定義控件的外觀，讓它們跟設(shè)計稿一樣美麗。下面的例子告訴你。 二、原生控件也可以很美麗，原生控件變裝實例 使用原生控使用原來的html表單控件結(jié)構(gòu)，通過css對控件自定義，改變其外形。下面從幾個實例中，我們一起關(guān)注下那些可以自定義的相關(guān)屬性，探尋未來可以自定義的種種可能。 例1：下拉菜單
這里我們可以通過通用的css定義方法，定義下拉框的寬度、高度、邊框、背景，還可以自定義下拉按鈕的圖片。這里為了方便處理，采用base64的圖片。 Tip：下拉菜單的樣式暫時只支持定義字體的大小。例2：單選框
單選框也可以被改變包括寬度、高度、背景圖片等屬性。這里為了節(jié)約流量，把幾種狀態(tài)的圖片合并為雪碧圖。從圖中效果來看，依靠單選框本身固有屬性很方便實現(xiàn)選中和未選中時不可點的狀態(tài)，并且不用擔心兼容性問題。 例3：復(fù)選框
復(fù)選框和單選框非常相似，我們可以通過定義寬度、高度、背景圖片等屬性，得到我們想要的效果。同樣的也可以用自己自身屬性實現(xiàn)可點擊、不可點擊、選中和未選中狀態(tài)的設(shè)置。 例子4. 其實，還可以做得更加好看些
以上的幾個例子是在原生控件基礎(chǔ)上做小的視覺改動，其實，我們可以做得更漂亮一些。下圖設(shè)計是一組第一眼看起來跟單選框沒關(guān)系的控件，透過現(xiàn)象看本質(zhì)，同一時間只能選擇其中一個空間，這就一個單選框控件的設(shè)計。所以我們以單選框為基礎(chǔ)，改變他們的展現(xiàn)就做成了下面樣子。
這一組已經(jīng)用在我們項目中， 是不是看起來非常特別。 未來有更多的不拘泥默認樣式的表單設(shè)計我們也可以試試看。 三、某個時候美麗的外衣還是“國王的新衣” 非常遺憾，由于非webkit內(nèi)核瀏覽器不支持這種自定義的操作，一部分用戶包括國內(nèi)瀏覽器大戶ie版本比較低的用戶還是不能體驗到這種美觀的控件。實用和美觀的平衡對于產(chǎn)品來說固然都非常重要的，有時候舍棄一些視覺效果多一些實用性可能換來的是更好評的體驗， 而且隨著技術(shù)的發(fā)展，自定義越來越靈活，瀏覽器對其的支持也越來越好，從這個角度來看，或許未來我們可以更多使用一些原生表單控件。 
