css3 appearance在iphone上面的问题

时间:2023-03-10 06:43:46
css3 appearance在iphone上面的问题

最近在做项目的时候,发现iphone上中

<input type="button">在修改了css样式之后还是保留自带的一些属性,然后在安卓手机上不会出现这样的问题,

在网上找了一些资料,

使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,

使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,

你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。

大家都知道每个浏览器对HTML元素渲染都不一样,比如说“button”,在chrome和ff中,渲染出来的效果都是不尽相同的。

这样一来就有了今天这个思路,利用浏览器的对元素的默认渲染风格,我们可以使用“appearance”属性对任何元素的渲染风格改变,

最简单的来说,我要把“a”链接默认显示成“按钮”风格,那么我们可以使用“appearance”设置为“button”。

“appearance”功能听起来蛮大的,不过可惜的是,目前各个浏览器厂商各自为政,还无法达到统一的标准,

至今天也只有两个内核的浏览器可以使用,其一是“webkit”,其二是“ff”的,也就是说在使用“appearances”时,需要加上各浏览器厂前缀。

appearance使用方法

.elmClass{
-webkit-appearance: value;
-moz-appearance: value;
appearance: value;
}