appearance 元素外观看上去像什么，这个css属性有点莫名其妙的感觉，正常属性值经常不能生效，可能是兼容性的问题，但是用于去除元素自带的样式，每次都很成功。

首先放出去除元素默认样式的css代码：

-webkit-appearance: none;
-moz-appearance:none;
appearance: none;
all: initial; //所有属性继承父级

appearance 属性值

  • normal 将元素呈现为常规元素。
  • icon 将元素呈现为图标（小图片）。
  • window 将元素呈现为视口。
  • button 将元素呈现为按钮。
  • menu 将元素呈现为一套供用户选择的选项。
  • field 将元素呈现为输入字段。
  • none    去除所有效果

appearance 元素外观看上去像什么？-QUI-Notes

appearance 元素外观看上去像什么？-QUI-Notes

案例中，我用div造btn，却没有生效，但是checkbox的样式确实去除了，显示了我需要的#000000黑色，所以说，用它添加效果，看起来...失效了！

例如：去除input、button、img、p、video等标签的默认样式，将上面代码复制到对应标签内，然后这个元素就可以自定义了，根据自己的需要修改这个元素的样式，谁说默认的check和radio样式不能修改？先去除默认样式，配合伪元素可以实现任意效果。