如何去除input标签点击之后出现的默认样式

如何去除input标签点击之后出现的默认样式

新项目刚刚开工碰上的第一个坑，记录一下，防止以后再踩进去~（代码以及效果图不忍直视，就不贴上来了）

html的input标签，很多时候都用过，但是今天才发现这一个坑——input的默认样式问题。在点击input的时候，会出现一个默认的其他颜色的边框。but~问题来了，这个默认的边框样式并不是我想要的，所以我就掉坑了，还是差点出不来那种。心塞~~~

后来琢磨了好久，查了各种资料（甚至想到要不要自己写个组件，当然那是不现实的），终于让我找到脱！坑！的！方！法！了！

其实去掉这个默认的样式并不是很复杂，只需要给input标签加一个 outline:none 的样式就可以了实现了（一行代码花了我老长时间，坑啊~），类似下面：

<style>input {outline:none}
</style>

还有一种方法，直接控制input标签聚焦是不出现默认边框，代码如下：

input:focus{ outline:none; }

Fine,问题解决。

PS：查找了资料后发现，除了input标签之外还有一些标签具有类似的默认样式，如果想要一起去除的话只要在css定义一开始就全部设置outline:none 就可以了。Done~