首页 > 代码库 > 改变表单元素的外观

改变表单元素的外观

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;}

 

 

改变表单元素的外观