表單元素在網頁設計中使用的非常頻繁，如文本輸入框、單選框、複選框、選擇清單、上傳檔案，它們在浏覽器中的展現有自帶的外觀，為了在視覺上取得更好的産品體驗，保持用戶端的統一，通常産品經理會提出需要改變它的外觀，使用自定義的，對于産品本身來說這樣的要求是加分項，開發在力所能及的範圍内應該大力支援。做h5移動開發，并沒有原生app開發那樣，大部分内容都可以自定義，移動端h5頁面受手機系統的影響，不同的浏覽廠商對表單元素的渲染效果差異很大。
下圖為 iphone4s 、魅族 android4.4 、諾基亞 winphone8 三部測試機下4種不同表單元素的預設外觀展現。
從上圖我們可以看出：
表單輸入框有預設的内陰影
單選框和複選框有預設的邊框和選中狀态
選擇清單有預設下拉箭頭
那麼，如何改變表單元素的外觀呢，由于浏覽器廠商不同，對 webkit 和 ie10 的處理方式也不同~
webkit 核心浏覽器具備私有屬性" -webkit-appearance "可以改變元素的外觀，該屬性非常強大，适合大部分标簽，這對于 webkit 的頁面優化帶來極大的幫助。
禁用表單input、select元素的預設外觀
禁用 select 預設下拉箭頭
::-ms-expand 适用于表單選擇控件下拉箭頭的修改，有多個屬性值，設定它隐藏 (display:none) 并使用背景圖檔來修飾可得到我們想要的效果。
::-ms-check 适用于表單複選框或單選按鈕預設圖示的修改，同樣有多個屬性值，設定它隐藏 (display:none) 并使用背景圖檔來修飾可得到我們想要的效果。
當表單文本輸入框輸入内容後會顯示文本清除按鈕，::-ms-clear 适用于該清除按鈕的修改，同樣設定使它隐藏 (display:none) 并使用背景圖檔來修飾可得到我們想要的效果。
通過以上的3項優化後，告别了矮龊窮，适當錦上添花，得到炫酷的視覺效果~
代碼：
由于電腦沒有安裝 ie11，不知道微軟在 ie11 的版本有無支援 apprearance ，如果有，那麼标準也算是出來啦，對全世界都好，如果say no，隻能說：呵呵，你妹的！！！
如今手機浏覽器廠商字首無非 -webkit 和 -ms ，webkit 很明顯占據了的優勢，雖然這樣，但我們也不能忽視了微軟的 winphone ，畢竟有一定的使用者就不可忽視它的價值，隻希望它們早日達成一緻，向标準靠齊~
作者：白樹