解决苹果手机ios safari浏览器中输入框有圆角、投影的问题

发布时间：2024-12-29 点击次数：217

苹果手机ios浏览器Safari 看网页时一些输入框都会变成带圆角的显示，如果希望页面在所有浏览器上看的效果一致，可关闭这个圆角特性。只需要给 input 或者 textarea 增加如下 CSS 即可： -webkit-appearance: none; border-radius: 0;

另外，使用html5编写页面在移动app中嵌套，总会涉及到按钮的使用，在android手机浏览器中显示正常，但在ios safari浏览器中会看到按钮显示为圆角样式，设置border-radius:0也不好使，其实添加css “-webkit-appearance”就能解决问题。

问题截图

input .btn
{
    display : inline-block ;
    height : 30px ;
    line-height : 30px ;
    border : 0 ;
    cursor : pointer ;
    font-size : 15px ;
    color : #fff ;
    font-weight : bold ;
    border-radius : 5px ;
    padding : 0px 20px;
    overflow : visible ;
    -webkit-appearance : none ;  /*解决iphone safari上的圆角问题*/
}

html

总结：

　　使用css样式-webkit-appearance: none; 轻松解决iphone safari上的圆角问题。

新闻中心

新闻中心

解决苹果手机ios safari浏览器中输入框有圆角、投影的问题

关于我们

成功案例

新闻中心

解决方案

联系我们