如何去掉input点击后的蓝色边框?

2020-06-13    html

首先我们在html页面中输入input的相关代码;

<div class="form">
<input id="code" class="ipx code" name="code" placeholder="请点击按钮领取礼包" type="text"><input type="button" class="send" value="发送">
</div>

用浏览器查看时,会发现点击input出现了蓝色边框;

2.jpg

查找了各方面的资料才知道这是input默认的样式。当然我们还是有办法解决的~,可以用css去除掉蓝色出现的蓝色边框,有三种方式:


第一种:直接在input中加

style=“outline:none;”

第二种方式:在顶部style中直接控制css样式:

<style type="text/css">
       input{outline:none;}
</style>


第三种方式:直接用以下diamante控制聚焦时不出现蓝色边框

<style type="text/css"> 
input:focus { outline: none; }
</style>


小结:

html很多标签都有默认样式,因此最好在样式中一开始就给表单标签去除默认的样式问题。

<style type="text/css">
      input,select,option,textarea{outline: none;}
</style>


标签:

赞赏


微信

支付宝
请站长喝杯咖啡吧!您的赞赏将被用于
  • 维护博客的稳定运行
  • 博客空间与域名费用
  • 发布更多文章与教程

评论

发表评论