如何去除 input 标签点击之后出现的默认样式,新项目刚刚开工碰上的第一个坑,记录一下,防止以后再踩进去~(代码以及效果图不忍直视,就不贴上来了)
html 的 input 标签,很多时候都用过,但是今天才发现这一个坑——input 的默认样式问题。在点击 input 的时候,会出现一个默认的其他颜色的边框。but~ 问题来了,这个默认的边框样式并不是我想要的,所以我就掉坑了,还是差点出不来那种。心塞~~~
后来琢磨了好久,查了各种资料(甚至想到要不要自己写个组件,当然那是不现实的),终于让我找到脱!坑!的!方!法!了!
其实去掉这个默认的样式并不是很复杂,只需要给 input 标签加一个 outline:none 的样式就可以了实现了(一行代码花了我老长时间,坑啊~),类似下面:
还有一种方法,直接控制 input 标签聚焦是不出现默认边框,代码如下:
- input:focus{ outline:none; }
Fine, 问题解决。
PS:查找了资料后发现,除了 input 标签之外还有一些标签具有类似的默认样式,如果想要一起去除的话只要在 CSS 定义一开始就全部设置 outline:none 就可以了。Done~
来源: http://www.2cto.com/kf/201708/666430.html