css 修改原生控件样式（select，button等）

发表于   |   分类于   |     |   阅读次数

前言

我们都知道 html 的一些原生控件都有自己的样式，比如 select（超级难看），button，input 等都有自己默认的样式，而在不用浏览器下显示的效果也不相同

为了保持在所有浏览器下保持一直，我们都会使用自定义的样式去代替这些默认的样式，但是为了快速开发也会使用一些，毕竟原生的没有那么多麻烦事儿~

那么有没有一种 css 来清除这些默认的样式呢？
然后还没有一个标准的属性来统一清除默认的样式，
但是~~~
今天看到了一个非CSS 规范的属性 -webkit-appearance

默认值

appearance: normal|icon|window|button|menu|field;

使用方法

这个属性可以直接修改元素的默认样式：

1
2
3
<span class="appearance" style="-webkit-appearance: searchfield-cancel-button;"></span>
<span class="appearance" style="-webkit-appearance: checkbox;"></span>
<span class="appearance" style="-webkit-appearance: button;">按钮</span>

效果：
demo