去除表单元素的默认样式

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;
}
相关文章
相关标签/搜索