ant-design的Input输入框取消选择后的蓝色背景以及如何取消提示

田本初

已于 2024-02-20 22:57:15 修改

阅读量1.6k

点赞数 2

分类专栏： Antdesign 文章标签： javascript react.js 前端

于 2023-08-22 16:34:58 首次发布

本文链接：https://blog.csdn.net/owo_ovo/article/details/132430811

版权

Antdesign 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

Antd的Input组件在获得焦点时，会展示一个可选提示框，框中罗列之前输入过得值，当选择提示框中的内容后，input输入框的背景色会变成蓝色。
在这里插入图片描述

取消蓝色背景色

只需在当前页或全局添加如下css

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #2a2d33;
  transition: background-color 5000s ease-out 0.5s;
}

不显示可选提示框

给input加上autoComplete="off"属性，这样输入框不会记录输入的信息

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

田本初

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

angular9+ant-design框架实现输入框只能输入数字和小数点

qq_41068717的博客

12-27

1306

1、功能实现以下代码引用至ant-design官方文档 import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'nz-demo-input-tooltip', encapsulation: ViewEncapsulation.None, template: ` <input #inputElement

Ant-Design-Vue快速上手指南+排坑

丁爸的博客

08-10

1533

Ant-Design-Vue 是一个功能强大、设计精良且易于使用的 Vue 组件库。通过遵循上述快速上手指南，你可以快速开始在项目中使用 Ant-Design-Vue，并构建出美观且功能强大的 Vue.js 应用。记得查阅官方文档以获取更多详细信息和高级用法。

1 条评论您还未登录，请先登录后发表或查看评论

去掉antd的Input组件获取焦点时的蓝色边框

weixin_33890526的博客

11-21

2783

antd的Input输入框组件在获取焦点时会有蓝色的边框显示，最初尝试通过设置outline:none的方法去掉这个边框，但是发现这个方法不起作用。最终通过在F12调试页面下的Elements选项下的多次观察和实验，发现antd的Input组件在获取焦点情况下的蓝色边框是通过box-shadow来实现的，找到问题所在就很好解决了。解决...

input输入框自动填充后消除背景色

08-15

1636

【代码】input输入框自动填充后消除背景色。

浏览器自动填充修改input:-internal-autofill-selected属性

热门推荐

u012857153的博客

03-22

3万+

input文本域选中后会出现蓝边框。去除方式

ant-design-vue 实现表格内部字段验证功能

10-15

在使用ant-design-vue开发web应用时，经常需要在表格组件中对数据进行输入和编辑。为了确保数据的准确性，对输入字段进行验证是必不可少的环节。在本文中，我们将探讨如何在ant-design-vue中实现表格内部字段的验证...

ant-design-demos

02-03

每个示例都会涉及到Ant Design的一个或多个组件，例如Button（按钮）、Input（输入框）、Form（表单）、Table（表格）、Layout（布局）、Dropdown（下拉菜单）、Badge（徽标）、Popover（气泡提示）等。通过实际操作...

antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边

zihang_cheng的博客

11-05

1780

antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边

清除antd中的select点击默认有蓝色边框

m0_57457086的博客

08-30

2288

.ant-select-selection__rendered { height: 100%; } .ant-select-selector { border: none !important; } .ant-select-selection { border: none !important; box-shadow: none; }

去除input选中时出现的蓝框

GTraveler

07-20

1万+

由于不同浏览器对outline这个css属性默认情况不同,造成在不同的浏览器上出现一些不同。解决方法是定义outline属性为none，如下：input{outline:none;}outline 属性(参考w3school) outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不一定是矩形。 outline 简写

去除input标签focus时蓝色边框

九日的博客

04-22

8119

去除标签focus时蓝色边框问题: 当使用input标签时，它会有一个默认样式，即当其获取到焦点时，会有一个蓝色边框效果。如下图：未获取焦点时：获取到焦点时：我们在控制台查看input:focus如下图。发现并没有相关的样式。事实上这是input的outline属性带来的问题。当我们加上 input { outline:none; } 就能解决这个问题。同样有这个问题...

去掉输入框、按钮等选中时的蓝色边框

wd7mxh38的博客

06-07

2060

当我们在选中我们的输入框，或者是点击了按钮的时候，边框默认会显示为蓝色。如下： 输入框：按钮：实际上，这个并不是他的边框。当我们将border设置为none的时候，蓝色依旧存在。这个东西其实叫作outline，即轮廓。我们在css样式中，设置：input{ outline: none; } 可以发现，再选中的时候，蓝色轮廓消失了。按钮也是一样的。因此我们知道，要去掉任意组件的蓝色的轮廓，将outline设置为none，即可。 ...

input去除蓝色边框

weixin_46449470的博客

06-28

698

input标签在使用的时候会有边框样式。当input聚焦的时候又会显示出一个蓝色边框。很多时候我们并不需要这种默认样式的边框，就需要去除边框。给需要去除的标签添加css样式： border: none; 去除input默认的边框 outline:none; 去除聚焦时的蓝色边框 outline-width:0 去除聚焦时的蓝色边框或者直接 input:focus { outline: none; }去除所有input的聚焦边框 <!DOCTYPE html> <html lan

去除input获取焦点后的蓝色边框

11的博客

09-23

573

input:focus{ box-shadow:0px 0px 10px 0px rgba(127,127,127,0.1); border-color: #FFAD01; } input可替换为class/ ———————————————— 版权声明：本文为CSDN博主「性野喜悲」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/l.

为什么javascript获取input的值是空

03-14

值？可能是因为你没有正确地获取input元素的值。你可以尝试使用document.getElementById()方法来获取input元素的值，或者使用jQuery的.val()方法来获取input元素的值。另外，还要确保你在获取input元素的值之前，已经输入了相应的内容。