关于 移动端项目下input自动变成圆角

最近在做一个项目，里面有大量使用到input，在浏览器上面看的时候没有圆角，但是在手机端查看的时候，居然有圆角了；

原来的代码：

width:40px;

height:26px;

line-height:26px;

border:none;

text-align:center;

相信这段代码都是一样的，刚开始是以为outline的问题，然后将outline加上去了还是没有解决问题；

继续查看css之后，发现自动被添加上了-webkit-appearance:button这个属性。我是一脸懵逼，没见过，但是去掉这个属性就好了。查了之后发现这个属性的作用就是让你的

修改后能够实现的代码，重要的就是最后那两行代码

width:40px;

height:26px;

line-height:26px;

border:none;

outline:none;

text-align:center;

//-webkit-appearance:none!important;

border-radius:!important;//去除手机端会出现的圆角

so:

解决方式很简单：

-webkit-appearance:none !important;

如果上面这句话不起作用，那就霸道点，直接css3，圆角为 0 就可以了。

border-radius: 0 !important;

如果你觉得不放心，那么你就直接把这个两个样式全部都加进去，哈哈，相信这个可以解决你们遇到的一些问题！！！