改变表单元素的外观

Posted 2020-09-14

ie10以下不支持

使用 appearance 改变 webkit 浏览器的默认外观

webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观，该属性非常强大，适合大部分标签，这对于 webkit 的页面优化带来极大的帮助。

禁用表单input、select元素的默认外观

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

 

/* 禁用select默认下拉箭头 */
select::-ms-expand{display:none;}

/* 禁用PC端表单输入框默认清除按钮 */
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none}

/* 禁用radio和checkbox默认样式 */
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}