【原】如何改變表單元素的外觀(for Webkit and IE10)

表單元素在網頁設計中使用的非常頻繁，如文本輸入框、單選框、複選框、挑選清單、上傳檔案，它們在瀏覽器中的展現有內建的外觀，為了在視覺上取得更好的產品體驗，保持用戶端的統一，通常產品經理會提出需要改變它的外觀，使用自訂的，對於產品本身來說這樣的要求是加分項，開發在力所能及的範圍內應該大力支援。做H5移動開發，並沒有原生APP開發那樣，大部分內容都可以自訂，移動端H5頁面受手機系統的影響，不同的瀏覽廠商對錶單元素的渲染效果差異很大。

為 iphone4s 、魅族 android4.4 、諾基亞 winphone8 三部測試機下4種不同表單元素的預設面板展現。

從我們可以看出：

• 表單輸入框有預設的內陰影
• 單選框和複選框有預設的邊框和選中狀態
• 挑選清單有預設下拉式箭頭

 

一、使用 appearance 改變 webkit 瀏覽器的預設面板

webkit 核心瀏覽器具備私人屬性" -webkit-appearance "可以改變元素的外觀，該屬性非常強大，適合大部分標籤，這對於 webkit 的頁面最佳化帶來極大的協助。

禁用表單input、selec元素的預設面板

{:;:;  }

更多 -webkit-appearance 的介紹，這裡推薦這篇文章《使用CSS3的appearance屬性改變元素的外觀》，對它有詳細的講解。

二、使用虛擬元素改變 IE10 表單元素預設面板

上個月，為了適配 winphone 5.0 版本的 IE10 瀏覽器，我做了一些對 IE10 相容的測試，並寫了《迎接winphone 5.0 版本的IE10樣式相容》一文，之前處理 IE10 表單元素的預設面板是採用透明度為 opacity:0 的寫法來重設表單的外觀，這個辦法使用起來有點複雜，對錶單內容的輸入，需要做額外的處理。近期瀏覽IE開發人員指南的官網，瞭解到 IE10 對錶單元素的預設面板也新增了虛擬元素來處理，也算是向前看齊，可能是因為 winphone 使用者少，大家目前只做好 webkit 做相容，對 winphone 相容缺少了關注，今天分享下 3 個常用的偽類元素。

 

{:;}

禁用 radio 和 checkbox 預設樣式

::-ms-check 適用於表單複選框或選項按鈕預設表徵圖的修改，同樣有多個屬性值，設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

{:;}

禁用表單輸入框預設清除按鈕

當表單文本輸入框輸入內容後會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，同樣設定使它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

{:;}

通過以上的3項最佳化後，告別了矮齪窮，適當錦上添花，得到炫酷的視覺效果~

代碼：

自訂表格單元素的外觀表單標題 文本輸入框 清除 選項按鈕1 選項按鈕2 複選按鈕1 複選按鈕2 下拉式清單方塊 所在省份 廣東 北京 View Code

請進入

由於電腦沒有安裝 IE11，不知道微軟在 IE11 的版本有無支援 apprearance ，如果有，那麼標準也算是出來啦，對全世界都好，如果say no，只能說：呵呵，你妹的！！！

如今手機瀏覽器廠商首碼無非 -webkit 和 -ms ，webkit 很明顯佔據了的優勢，雖然這樣，但我們也不能忽視了微軟的 winphone ，畢竟有一定的使用者就不可忽視它的價值，只希望它們早日達成一致，向標準靠齊~