最近在做一个项目,里面有大量使用到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;
如果你觉得不放心,那么你就直接把这个两个样式全部都加进去,哈哈,相信这个可以解决你们遇到的一些问题!!!
领取专属 10元无门槛券
私享最新 技术干货