一、使用 appearance 改變 webkit 瀏覽器的默認外觀

webkit 內核瀏覽器具備私有屬性" -webkit-appearance "可以改變元素的外觀，該屬性非常強大，適合大部分標簽，這對于 webkit 的頁面優化帶來極大的幫助。

禁用表單input、select元素的默認外觀

input,select{ -webkit-appearance:none;appearance:none; }

二、使用偽元素改變 IE10 表單元素默認外觀

禁用 select 默認下拉箭頭

::-ms-expand 適用于表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。

select::-ms-expand { display: none; }

禁用 radio 和 checkbox 默認樣式

::-ms-check?適用于表單復選框或單選按鈕默認圖標的修改，同樣有多個屬性值，設置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。

input[type=radio]::-ms-check, input[type=checkbox]::-ms-check{ display: none; }

禁用PC端表單輸入框默認清除按鈕

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

input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear{ display: none; }

?

轉載于:https://www.cnblogs.com/leifeng-hm/p/4011609.html

總結

以上是生活随笔為你收集整理的去除表单元素的默认样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。