如何清除css中文本框获得焦点时 自动出现的边框

最新推荐文章于 2023-10-08 09:06:58 发布
最新推荐文章于 2023-10-08 09:06:58 发布
阅读量2.2k 收藏 5
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eight_eyes_fish/article/details/127624944
版权

在我们用到文本框的时候，一般情况下我们回清除文本框自带的边框，利用border:none；即可取消自带边框，但当文本框获得焦点时，会自动显示边框，如图

这个问题，我们设置获得焦点时，利用outline:none;即可取消 

input:focus {
   outline:none;
}

结果如下

 

八眼鱼
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview Input组件聚焦时会出现边框（去除边框CSS）
日常笔记/总结/系列知识梳理
09-26 3572
去除边框CSS .ivu-input:focus{ outline:none; border:none; box-shadow: 0 0 0 2px transparent; }
去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
09-25
首先，关于`input`和`textarea`的焦点边框，Chrome浏览器会为获得焦点的这些元素添加一个黄色的轮廓（outline），这通常是为了帮助用户识别当前的交互元素。如果想去除这个默认边框，可以通过CSS的`outline`属性来...
去掉input聚焦时的边框
weixin_43915401的博客
05-30 2890
<html> <body> <input placeholder="请输入"/> </body> </html> border:none效果 <html> <head> <style> input{ border:none; } </style>
input，去掉点击时的边框
anye_zhuzai的博客
03-07 1536
设立边框后点击时出现另一种颜色的边框怎么办？直接给input添加样式。
去除input标签focus时蓝色边框
九日的博客
04-22 7774
去除标签focus时蓝色边框 问题: 当使用input标签时，它会有一个默认样式，即当其获取到焦点时，会有一个蓝色边框效果。如下图： 未获取焦点时： 获取到焦点时： 我们在控制台查看input:focus如下图。 发现并没有相关的样式。 事实上这是input的outline属性带来的问题。当我们加上 input { outline:none; } 就能解决这个问题。同样有这个问题...
点击input时，去除边框
qq_37037988的博客
02-03 2421
点击input时，去除边框
CSS 取消input输入框聚焦时的边框（border&outline）
qq_39706777的博客
09-26 8594
输入框默认聚焦后会有一个边框样式 想去掉这个样式先了解下border和outline border&outline border 和 outline 都绘制于元素周围，它们的区别是 outline 不占据空间。 outline属性值可以设置宽度、样式、颜色，顺序无所谓，同border样式。 注意：对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。 将 outline 设置为 0 或 none 会
在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法
12-01
在Chrome浏览器中，当用户聚焦到`input[type="text"]`输入框或`textarea`多行文本框时，浏览器会自动添加一个黄色的边框来提示用户当前元素处于焦点状态。然而，在某些情况下，这种默认的黄色边框可能与网页的设计...
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
10-27
当输入框获得焦点且其值等于默认值时，清除输入框的值；当输入框失去焦点且无用户输入时，恢复默认值。 这种实现方式提高了代码的可维护性和复用性，只需要修改jQuery代码中的类名或默认值，就能轻松地应用于整个...
jquery实现当输入框获得焦点时自动渐变颜色
05-15
标题 "jquery实现当输入框获得焦点时自动渐变颜色" 涉及的是在Web开发中使用jQuery库来实现一种动态用户体验，即当用户点击或选中一个输入框（text box）时，该输入框的边框颜色会逐渐变化，以增加交互性和视觉吸引...
IE下target获得焦点时产生虚线问题的解决方法
12-09
标题中的“IE下target获得焦点时产生虚线问题的解决方法”指的是在IE浏览器中，当某个元素（target）通过点击或者其他方式获取到焦点时，会自动出现一个蓝色的虚线边框，这可能与设计师的预期视觉效果不符。...
去掉input搜索框获得焦点时的边框
学点的CSDN博客
02-21 5281
开发工具与关键技术：Adobe Dreamweaver CC 与css 作者：黄灿 撰写时间：2019.2.16 用input[type=”text”]写一个搜索框，很简单 图1 这样子写这个搜索框，获得焦点是有一个自带的边框出现 图2 想要在搜索框中获得焦点时这个边框隐藏起来我们需要加上一个属性 图3 写上outline为none这个属性，在搜索框中获得焦点时这个边框就会隐藏起来 图4 ...
如何修改input获取焦点的边框颜色
qq_46580571的博客
12-15 3812
如何修改input获取焦点的边框颜色
html获得焦点显示边框,input获得焦点时，如何让外边框不变蓝
weixin_34489089的博客
07-02 703
input获得焦点时，如何让外边框不变蓝border 可应用于几乎所有有形的html元素，而outline 是针对链接、表单控件和ImageMap等元素设计。outline的效果将随元素的 focus 而自动出现，相应的随 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。outline不会像border那样影响元素的尺寸或者位置。使用input:focu...
HTML文本框聚焦边框颜色如何不改变
wuqingchaishao的博客
09-15 1308
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>文本框颜色如何不改变</title> </head> <style type...
css：去除input和textarea默认边框样式并美化
彭世瑜的博客
06-28 4197
同样参考element-ui的css，可以实现如下效果。参考element-ui的css，可以实现如下效果。textarea默认样式和focus样式。input默认样式和focus样式。/* 鼠标hover *//* 鼠标hover *//* 去除默认样式 *//* 去除默认样式 *//* 自定义样式 *//* 自定义样式 *//* 提示文字 *//* 获得焦点 *//* 提示文字 *//* 获得焦点 */
css 去掉button/input点击时出现的边框
m0_50972615的博客
11-15 972
css 去掉button/input点击时出现的边框
input标签的获得焦点和失去焦点的样式
orichisonic的专栏
03-04 5771
获得焦点的四周边框： style='border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ' 失去焦点如果去掉边框只要： outline:none;
input输入框获取焦点时改变边框颜色
最新发布
Lipn_的博客
10-08 1033
border属性不生效，使用outline属性
CSS3新特性详解：边框与背景的革命
文档涵盖了CSS3的多个模块，包括边框、背景、颜色、文本效果、用户界面、选择器、基本盒模型、生成内容和其他模块等。此外，特别强调了一些重要的CSS3特性，如border-color、border-image、border-radius、box-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值