关于ant 组件库input的outline问题

于 2021-12-09 16:47:27 发布
阅读量362 收藏
点赞数 1
文章标签： ant vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/n_oo_b/article/details/121831701
版权
本文探讨了Ant Design中Input组件在获取焦点时，其蓝色边框并非由outline属性控制，而是通过CSS阴影实现的效果。文章详细介绍了如何通过CSS来取消这个焦点时的边框显示，为前端开发者提供了解决此类视觉效果问题的方法。
摘要由CSDN通过智能技术生成

ant组件库input获取焦点时的蓝色外边线不是因为outline

而是通过css的阴影实现的类似效果,所以要通过css取消

n_oo_b
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native-input-outline
03-12
由于在其他TextInput库中注意到的所有性能问题，所以我构建了该库。 由于Reanimated v2，该库的性能非常出色。 如果喜欢，留下一颗星星吧！ 使用Reanimated 2构建的Performance React Native TextInputs。 安装 ...
表单button的outline在firefox浏览器下的问题
09-22
outline的使用，大家都喜欢在reset样式表中直接重置outline: none;可是有一点可能大家还是不太清楚——outline在表单的button中使用时，在firefox浏览器下依然还是会有虚线框显示的;那么今天这个教程就简单的来了解...
去掉antd的Input组件获取焦点时的蓝色边框
weixin_33890526的博客
11-21 2735
antd的Input输入框组件在获取焦点时会有蓝色的边框显示，最初尝试通过设置outline:none的方法去掉这个边框，但是发现这个方法不起作用。 最终通过在F12调试页面下的Elements选项下的多次观察和实验，发现antd的Input组件在获取焦点情况下的蓝色边框是通过box-shadow来实现的，找到问题所在就很好解决了。 解决...
input 使用outline属性去掉淡蓝色边框不生效
立青的博客
02-26 1万+
1.常用的做法是使用outline:none 这个样式就可以了 <html> <head> <title> 测试 </title> <style type="text/css"> input{ outl...
input 获取焦点 蓝色边框 去掉 outline
会飞的程序猿
07-20 2万+
最近发生了一些前端小问题，会在博客一一记下来 第一篇是 outline 属性的使用 去除input的边框 开始有以下方案 input{text-indent: 1em;} #search1{ } #search2{ border-width: 0; } #search3{ border:1px solid red; } #search4{ outline:medium;} ...
如何实现input输入框，在获得焦点时外边框不变蓝
qq_26780317的博客
01-06 2万+
背景 最近，项目中的网页在测试的时候，发现一个搜索输入框input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，而其他FF、IE、Google均未变蓝，现在需要将网页中的所有输入框，都被设计为“获得鼠标焦点时外边框不变蓝”。情况如下所示： 其实，是由于各个游览器的outline默认值不同导致的，所以，解决的方法很简单，将定义outline属性为none，即将下面的css代码
ant design input 框去除点击蓝色颜色边框
山外小楼
01-25 4650
.ant-input-affix-wrapper { border: none ; background: #f6f6f6; outline: none; width: 95%; box-shadow: none; }
解决ios手机中input输入框光标过长的问题
08-27
"解决ios手机中input输入框光标过长的问题" 在移动端页面开发中，input输入框的光标大小问题是一个常见的问题，特别是在iOS手机中，光标大小与安卓手机不一致的问题。今天，我们将讨论如何解决ios手机中input输入框...
cadence allegro 17.2 design outline的使用问题
02-14
使用Outline层的一个明显问题是，每次输出Gerber文件时，系统都会弹出提示对话框，提醒用户使用新的定义方式。这不仅会打断工作流程，而且在创建3D模型时，电路板的外观可能无法正确显示。 为了解决这些问题，我们...
PC端windows使用Outline，Outline-Client
01-30
Outline-Client上网用,PC端windows使用
outline属性-关于input获取焦点时的边框(划去，其实是轮廓)设置
dark_cy的博客
07-11 7804
直入正题点这里 　　今天跟着视频做静态网页练习的时候，有用到 <input> 标签做查询输入框。因为代码是跟着视频来写的，所以布局的样式都没啥毛病，但是当我点击输入框，让其获得焦点时，输入框就会显示出来一个黑色的边框（如下图）。 　　看到这个框框我就很纳闷，我根本没有设置这样的属性啊！这个莫名其妙的黑色框框是哪里来的？难道我少写了什么代码？ 　　抱着这样的疑问，我又重新看了一遍视频中的相关部分，发现我的代码跟视频中的一模一样，可是视频中老师并没有讲到关于这个框框的问题，他在写好这部分代码后压根
如何去除表单元素获得焦点时的外边框:outline (轮廓)
weixin_30625691的博客
11-24 454
我们在做制作表单页面时，经常会需要消除表单元素带来的边框，这时候我们需要用到两个属性： 　　 1、表单元素未激活状态下的边框，不实现边框: border:none; 2、表单元素获得焦点时的轮廓,隐藏轮廓: outline:medium; 　　具体代码如下： .form_row input[type=text], ...
玩转React样式
weixin_34198797的博客
09-09 434
很久很久以前，就有人用CSS来时给HTML内容添加样式。CSS可以最大限度的分离样式和内容，选择器也可以很方便的给某些元素添加样式。你根本找不到任何不用CSS的理由。 但是在React这里就是另外一回事了，虽然React不是不用CSS。但是，它在给元素添加样式的时候方式不同。React的核心哲学之一就是让可视化的组件自包含，并且可复用。这...
ant design (antd) Modal 自定义样式，去除白色背景，边框，关闭按钮
热门推荐
wyk304443164的专栏
03-30 6万+
想实现功能如下： 这个Modal没有头，没有确定什么的。 因为Modal组件不能自定义外边框，所以把所有的属性全都删掉之后： Modal title={null} visible={this.state.visible} onCancel={this.handleCancel} footer={null} closable={f
antd 常用知识点和小技巧总结
qq_34527715的博客
07-03 2854
目录 1 form 表单中 FormItem 的布局 2 form 表单，FormItem 的 rules 中新增 validator，实时请求校验 3 利用 validator 和正则，验证中文 4 form.validateFields 直接获取表单的值 5 form 表单提交 htmlType，改为 onClick 6 Input 组件，利用 maxLength 属性，限制最大输入内容长度 7 InputNumber 只能输入数字 8 menu 实现回缩效果注意点 9 左侧菜单调整宽
Ant Design Vue实现div模拟input实现输入框
yangwq的博客
11-12 3020
目录导航目的实现方案H5代码块CSS代码块效果展示 目的 div模拟input实现输入框 实现方案 H5的全局属性contenteditable属性 : 带有contenteditable属性的div作为输入框（div可以根据内容自动调整高度） H5代码块 <div class="search"> <div contenteditable class="inputType...
Uniapp软件库全新带勋章功能/包含前后端源码
08-14
Uniapp软件库全新带勋章功能，搭建好后台 在前端找到 util 这个文件 把两个js文件上面的填上自己的域名，电脑需要下载：HBuilderX 登录账号 没有账号就注册账号，然后上传文件，打包选择 “发行” 可以打包app h5等等。 后端安装： 1、下载源码到服务器目录 2、设置运行目录为 public 3、配置伪静态 4、修改数据库账号密码config/database.php点击导入， 5、访问域名即可
【独家首发】基于矮猫鼬优化算法DMOA-GMDH的锂电池寿命SOC估计算法研究Matlab实现.rar
最新发布
08-14
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
css input 边框 outline
05-11
- Border 属性是在元素的内部绘制边框，而 Outline 属性是在元素的外部绘制边框。 - Border 属性会占用元素的尺寸，而 Outline 属性不会影响元素的尺寸。 - Border 属性可以独立设置上下左右四个边框的样式、颜色和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值