一、使用 appearance 改變 webkit 瀏覽器的默認(rèn)外觀

webkit 內(nèi)核瀏覽器具備私有屬性" -webkit-appearance "可以改變元素的外觀，該屬性非常強(qiáng)大，適合大部分標(biāo)簽，這對于 webkit 的頁面優(yōu)化帶來極大的幫助。

禁用表單input、select元素的默認(rèn)外觀

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

二、使用偽元素改變 IE10 表單元素默認(rèn)外觀

禁用 select 默認(rèn)下拉箭頭

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

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

禁用 radio 和 checkbox 默認(rèn)樣式

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

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

禁用PC端表單輸入框默認(rèn)清除按鈕

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/leifeng-hm/p/4011609.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。