如何去除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~

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值