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

已于 2024-02-20 22:57:15 修改
阅读量999 收藏 1
点赞数 1
分类专栏： Antdesign 文章标签： javascript react.js 前端
于 2023-08-22 16:34:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owo_ovo/article/details/132430811
版权

前言

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"属性，这样输入框不会记录输入的信息

在这里插入图片描述

田本初
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face: Ant Design的深色主题。 仍处于实验阶段，欢迎尝试并帮助我们进行改进。 访问进行预览。 安装 $ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } , 在Ant Design Pro中使用： :
jquery检测input checked 控件是否被选中的方法
10-26
主要介绍了jquery检测input checked 控件是否被选中的方法,需要的朋友可以参考下
ant design for Vue 修改组件默认样式
zhanghuaiwei
08-04 1938
ant design for Vue 修改组件默认样式
去掉输入框、按钮等选中时的蓝色边框
wd7mxh38的博客
06-07 1917
当我们在选中我们的输入框，或者是点击了按钮的时候，边框默认会显示为蓝色。 如下： 输入框： 按钮： 实际上，这个并不是他的边框。当我们将border设置为none的时候，蓝色依旧存在。 这个东西其实叫作outline，即轮廓。我们在css样式中，设置：input{ outline: none; } 可以发现，再选中的时候，蓝色轮廓消失了。 按钮也是一样的。 因此我们知道，要去掉任意组件的蓝色的轮廓，将outline设置为none，即可。 ...
input输入框自动填充后消除背景色
最新发布
08-15 1096
【代码】input输入框自动填充后消除背景色。
解决chrome浏览器中input背景透明问题
12-13
在使用chrome浏览器设计网页时，想将input背景改成透明，也就是 复制代码代码如下:background-color:transparent; 可是效果并不如人意 hack方法： 复制代码代码如下:input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-box-shadow: 0 0 0 1000px transparent inset; } 1000px可以尽可能的小~~
input 在浏览中 自动填充后的默认样式 修改
qq_41846172的博客
05-19 3418
在chrom中，我们时长会遇到一个自动填充后，背景颜色变了，不是我们默认的背景颜色。而是白色，这就是因为input标签在默认填充后，会有一个默认的样式 input:-internal-autofill-selected { background-color: rgb(232, 240, 254) !important; background-image: none !important; color: rgb(0, 0, 0) !important; } 如果想要修改，需要覆盖
谷歌浏览器input输入框背景透明色 input:-internal-autofill-selected
MELANCHOLY ❤ ◁ ❚❚ ▷
11-08 2486
谷歌浏览器input输入框背景透明色 input:-internal-autofill-selected。
chrome浏览器中自带input样式input:-internal-autofill-selected（修改input背景色）
热门推荐
lys20000913的博客
02-27 1万+
实现思路1：如果不是想设置为透明色 可直接使用box-shadow input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px white inset !important; } 实现思路2：关闭自动填充功能 ( 也可实现 不推荐 ) <input type="text" autocomplete="off"> 实现思路3：通...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： ...git clone https://github.com/vueComponent/ant-
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react[email protected]或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
nuxt-ant-design-vue
05-08
@ nuxtjs-extra / ant-design-vue 适用于Ant Design Vue的Nuxt模块设置向项目添加依赖项yarn add @nuxtjs-extra/ant-design-vue @nuxt/components # or npm install @nuxtjs-extra/ant-design-vue 如果您使用...
去掉input框点击时的默认颜色
weixin_33751566的博客
04-01 690
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本框鼠标点中时边框不变色</title> 6 </head> 7 <body> 8 <input ...
去除input选中时出现的蓝框
GTraveler
07-20 1万+
由于不同浏览器对outline这个css属性默认情况不同,造成在不同的浏览器上出现一些不同。解决方法是定义outline属性为none，如下：input{outline:none;}outline 属性(参考w3school) outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 注释：轮廓线不会占据空间，也不一定是矩形。 outline 简写
antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边
zihang_cheng的博客
11-05 1542
antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边
vue 正则验证 input 输入0-100的正整数 删除input框后面的上下箭头 样式 ant design vue a-input-number标签
weixin_41883384的博客
11-24 3845
//推荐使用 formatter ： 实时验证，输入值大于100时显示100，并且不显示多余的数字；值为空时显示0 ；如果不满足需求你可以在接着改 代码示例： <a-input-number v-model:value="item.rankScore" :min="0" :max="100" :formatter="formatter" @change="handleChange(item)" style="width: 60px;" /> //不推荐使用 //只是..
vue ant a-input 标签 去除获取焦点时的样式
温柔雨哥的博客
08-04 1561
修改input框placeholder的默认样式 去除获取焦点时的样式 去除验证错误的样式
我需要一段使用ant-design组件生成的输入框
03-21
当然可以，以下是使用 ant-design 组件生成输入框的代码： import React from 'react'; import { Input } from 'antd'; const { Search } = Input; function App() { return ( <div> <Search placeholder="请输入关键字" enterButton /> </div> ); } export default App;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值