css3 appearance 改变元素外观

h5 input标签的默认样式去除:

去掉date类型<input>框的叉叉:

::-webkit-clear-button {
     -webkit-appearance: none; 
}

去掉number类型<input>框的上下箭头:

::-webkit-inner-spin-button {
     -webkit-appearance: none;    /* 上下小箭头按钮,你丫太丑了,滚粗,负分 */
}

去掉search类型<input>框的N多特征:

/* 去除圆角 */
input[type=search] { -webkit-appearance: none; }

/* 隐藏取消按钮 */
::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 隐藏放大镜 */
::-webkit-search-results-button { -webkit-appearance: none; }

appearance可以影响外观,但是不影响box-sizingbox-sizing是由type属性值决定的

原出处:http://www.zhangxinxu.com/wordpress/2016/07/css3-appearance-all-box-sizing/

原文地址:https://www.cnblogs.com/xiaofenguo/p/6137680.html