苹果ios safari浏览器中输入框有圆角、投影代码

2017-02-06 郑州网站建设  
iphone手机ios浏览器Safari 看网页时一些输入框都会变成带圆角的显示,如果希望页面在所有浏览器上看的效果一致,可关闭这个圆角特性。
只需要给 input 或者 textarea 增加如下 CSS 即可:
-webkit-appearance: none;
border-radius: 0;
 
苹果ios safari浏览器中输入框有圆角、投影代码
另外,使用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
 
< input type ="button" class ="btn" />
总结:
   使用css样式-webkit-appearance: none;  轻松解决iphone safari上的圆角问题。

河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://www.tzchb.com/tech/213.html转载请标明出处,谢谢合作!
标签:
  • 代码
  • css
  • 浏览器
  • 样式
  • HTML5