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

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

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

appearance 属性值

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

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

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