去除表單元素的默認樣式

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

webkit 內核瀏覽器具有私有屬性" -webkit-appearance "能夠改變元素的外觀,該屬性很是強大,適合大部分標籤,這對於 webkit 的頁面優化帶來極大的幫助。web

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

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

2、使用僞元素改變 IE10 表單元素默認外觀

禁用 select 默認下拉箭頭app

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

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

禁用 radio 和 checkbox 默認樣式

::-ms-check 適用於表單複選框或單選按鈕默認圖標的修改,一樣有多個屬性值,設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。spa

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

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

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

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear{
display: none;
}
相關文章
相關標籤/搜索