使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式

使用 iPhone 或android上的浏览器去浏览网页的时候,不同浏览器间的按钮有些会显示圆角且颜色由上而下渐变的样式,有些文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。此时的解决办法为:input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-appearance:none;}

其中,-webkit-appearance:none是去除input默认样式。

此时虽然去掉了按钮显示超大圆角以及颜色由上而下渐变的恶心样式,但按钮的圆角依然存在,所以还需在样式中加入:border-radius:0方可。

注意,注意:只能是border-radius:0;而不能使用border-radius:none,因为使用了border-radius:none,iPhone浏览器貌似不识别,依然会给input一个大概5像素左右的圆角。

若需要给表单设置圆角比如5px的话,那就自行设置border-radius:5px即可。 (more…)

发表于:2021-06-05 23:28:38 分类:代码 发表评论 Tags:, , , ,

Archives