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

您所在的位置:网站首页 css怎么清除样式的颜色边框 如何去除input标签点击之后出现的默认样式

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

2024-07-09 17:15| 来源: 网络整理| 查看: 265

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

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

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

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

input { outline:none }

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

input:focus{ outline:none; }

Fine,问题解决。

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3