去掉input阴影边框

使用AmazeUI时彻底去掉input框的边框

使用AmazeUI写微信页面时,有一个隐藏input边框的需求,于是设置input边框的属性

border:none;

但是,当input获取焦点后,又会显示出来一个蓝色的边框,这是想到了outline属性,于是先后试了两个设置方式

outline: none;
outline: medium;

这时发现这两个都完全没有作用。后来去amazeui.css中查看outline,发现了这么一段代码

去掉input阴影边框_第1张图片

当这些元素获取焦点时,设置了两个元素

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(59, 180, 242, 0.3);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(59, 180, 242, 0.3);

所以在自己的css文件把这两个属性设置成none就成了。至于box-shadow属性,可以参考这里

你可能感兴趣的:(微信页面)