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

 时间:2026-05-05 09:47:25

1、首先我们在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、用浏览器查看时,会发现点击input出现了蓝色边框;

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

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

第一种:直接在input中加style=“outline:none;”如图

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

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

<style type="text/css">

       input{outline:none;}

</style>

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

3、第三种方式:直接用 input:focus { outline: none; } 控制聚焦时不出现蓝色边框~

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

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

<style type="text/css">

      input,select,option,textarea{outline: none;}

</style>

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

  • HTML中引入css和js的方法
  • html透明度怎么设置
  • css怎么调整背景图片的位置?
  • html如何把两个网页连接起来
  • 实现整个html居中最简单方法
  • 热门搜索
    中秋节手抄报内容文字 同讲普通话携手进小康手抄报 劳动节的手抄报 2035年的家乡手抄报 热爱劳动手抄报 新年手抄报简单又漂亮 做一个有道德的人手抄报 手抄报资料 交通手抄报内容 植物园手抄报