CSS3-关于input框autocomplete开启后 input框补全后默认背景颜色

最新推荐文章于 2024-04-15 17:08:52 发布
最新推荐文章于 2024-04-15 17:08:52 发布
阅读量2.1k 收藏 2
点赞数 5
分类专栏： CSS3 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44622984/article/details/107183130
版权

今天在开发过程中碰到了这样的情况,input框在我设置好样式后,我点击进行输入值,一旦我选择自动补全(及它弹出的下拉框中的以前填过的数据),就会出现默认的背景颜色,极容易影响整体框体效果

如:在这里插入图片描述
出现的这个默认背景颜色很影响整体效果,于是要进行清除,最终查到了input有个属性设置,设置如下即可清除

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    transition: background-color 5000s ease-in-out 0s !important;
}

设置后效果如下:
在这里插入图片描述
可以看出 不再有默认的背景颜色

Skime Ma
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS3自学笔记（HTML篇 表单属性）autocomplete + target + value + autofocus + disabled + readonly 属性
weixin_53659971的博客
07-14 512
HTML+CSS3自学笔记（HTML篇 表单属性）autocomplete + target + value + autofocus + disabled + readonly 属性
css input 自动宽度,css - width：auto表示<input>字段
weixin_29541589的博客
08-04 1585
css - width：auto表示字段新手CSS问题。 我认为width:auto对于display:block元素意味着'填充可用空间'。 然而，对于元素，情况似乎并非如此。 例如：那么两个问题：究竟有什么宽度的定义：auto是什么意思？ CSS规范对我来说似乎含糊不清，但也许我错过了相关部分。有没有办法实现我对输入字段的预期行为 - 即。 像其他块级元素一样填充可用空间吗？谢谢！rich...
react-autocomplete-input:React的自动完成输入字段
04-28
React自动完成输入 React的自动完成输入字段 演示版 有演示和游乐场 使用范例 import TextInput from 'react-autocomplete-input' ; import 'react-autocomplete-input/dist/bundle.css' ; < TextInput xss=removed> 多个触发器和选项示例 import TextInput from 'react-autocomplete-input' ; import 'react-autocomplete-input/dist/bundle.css' ; < TextField trigger = { [ "@" , "@@" ] } options = { { "@" : [
屏蔽、去掉、修改谷歌浏览器input输入框背景透明色input:-internal-autofill-previewed和input:-internal-autofill-selected
最新发布
aaa123aaasqw的博客
04-15 336
【代码】屏蔽、去掉、修改谷歌浏览器input输入框背景透明色input:-internal-autofill-previewed和input:-internal-autofill-selected。
autocomplete-css
小雪驿站
10-27 1637
.outer_content_div{    border:1px solid black;    background-color:#6CA359;    width:320px;    height:310px;       }   .qq_div{    margin:2px;    padding:7px;    border:1px solid b
解决input输入框自动填充账号密码出现背景色的问题
weixin_45899022的博客
04-30 4650
https://blog.csdn.net/qq_35393869/article/details/81978037
input文本框自动填充背景色黄色解决办法
草巾冒小子的博客
08-25 1万+
input文本框自动填充背景色黄色解决方式 如何取消黄背景色？浏览器兼容处理？ 本文目录： input文本框自动填充背景色黄色解决方式 解决前后，截图对比： 解决方式 兼容性说明 解决前后，截图对比： 解决方式 1 · 通过CSS代码约束 &amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; input:-...
vue-tags-input:VueJS的标签输入组件
04-28
创建后编辑标签快速设置与Vuex一起使用小尺寸：最小34kb（包括CSS）| 压缩9kb 自动补全许多定制选项自己的模板删除退格上的标签在粘贴上添加标签范例与文件安装NPM npm install @johmun/vue-tags-inputCDN [removed...
vue-tags-input组件使用指南(推荐)
10-15
Vue Tags Input组件是一种用于在Vue.js应用程序中实现标签输入功能的第三方组件。它以其小巧的体积、易用性以及丰富的自定义选项而受到推崇。在本文中，我们将深入探讨如何使用这个组件，以便在你的项目中高效地实现...
select-input-autocomplete:input模糊匹配(仿百度)-参照select2、autocomplete
05-17
在IT行业中，前端开发是构建用户交互界面的关键部分，而输入框（input）与自动补全（autocomplete）功能则是提升用户体验的重要工具。本项目“select-input-autocomplete”旨在实现一个模仿百度搜索的输入框模糊匹配...
vue-tag-input
05-18
入门安装从CLI推荐intall： npm install --save vue-tag-input // ORyarn add vue-tag-input 如果要直接包含脚本： <!-- Load Script --> < script src =" ...
Antd组件Input在暗黑模式下，autoComplete导致的背景色问题
shanshiping的专栏
03-15 462
Antd的组件暗黑模式，默认Input的背景色是暗黑的，但是浏览器支持自动填充功能的话，就会变成这样，看着就难受。个人更倾向于第二种方法，如果你有其他方式的话，欢迎评论区留言。在app.less全局样式里面添加如下代码也能解决。二、添加样式，进行修改。一、关闭自动填充功能。
input文本输入框自动提示-autocomplete
一万年太久，只争朝夕
09-18 2896
首先来说，由于作者刚接触网站的开发，这篇文章写得有点乱，主要是记录给自己看的，怕以后忘记了，方便到时候查阅，若给您带来了不便，还请见谅。若有什么建议，请留言。非常感谢。 --------------------------------------------步入正题-------------------------------------------- 问题（目标）：目标样式如图1所示，当在文本框中输入字符时，实时进行提示相关信息，供用户参考和选择。 **分析：**那么这个功能该如何实现呢，jQuery提
input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色
weixin_33912246的博客
08-26 582
填写form表单时发现chrome的一个好坑啊！ 当你之前有填写过表单，获取焦点时，input会有一个记录之前填写过的文本的下拉列表式的东东，就像这样：（抱歉丑了点，隐私问题打上了马赛克） 按理说，这没什么问题，很多时候为了方便，也需要它记录输入，但是，同时也发现，文本框变成了屎黄色了！而且当你选择其中的文本时它依然还是屎黄色！ 真是卧槽了...... 这完全不是我想要的效果啊，谁愿...
vue修改 el-input 输入框默认背景色
God__is__a__girl的博客
09-08 7684
vue修改 el-input 输入框默认背景色
el-autocomplete没有匹配数据时通过css修改样式显示无匹配数据
a20001999的博客
02-01 981
el-autocomplete没有匹配数据时通过css修改样式显示无匹配数据
给所有的input设置 autocomplete="off"
腾讯全栈-ITCJF
08-17 1万+
有些浏览器会自动填充表单， 比如firefox， 但有时我们又不希望浏览器自动填充  所以我们会使用 autocomplete="off" 属性告诉浏览器不要自动填充  但是每个input都要写一次autocomplete="off" 就显得很冗余了  还好，可以通过js在页面load后对所有的input修改此属性，下面是一个jquery的版本：  // 去掉所有input的autocomplet...
关于input自带的自动补全的功能——autocomplete
热门推荐
weixin_37575140的博客
01-10 1万+
纪念一下，这是我的第一篇在C站上的博客~撒花~ autocomplete 属性规定输入字段是否应该启用自动完成功能。默认情况下是启动的，也就是当你点击了input获取焦点之后浏览器会自动将以前的输入记录作为填入选项显示出来。这个是HTML5中的新属性，在不支持HTML5的浏览器下是没有用的。 注释：autocomplete 属性适用于 ，以及下面的 类型：text, search, ur
css解决input[type=text]自动填充（auto fill）内容时颜色为黄色
tianseyiwan008的博客
09-05 2496
原因： input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {     background-color：rgb(250, 255, 189)；     background-image：none；     color：rgb(0, 0, 0)； }   解决 input:-webki...
如何在input框内添加layui字体图标
05-24
要在input框内添加layui字体图标，需要按照以下步骤操作： 1. 在HTML文件中引入layui字体图标的CSS文件和字体文件，可以通过以下代码实现： ```html <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.4.5/css/layui.css"> ``` 2. 在input框内添加一个图标元素，可以通过以下代码实现： ```html <div class="layui-input-inline"> <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"> <i class="layui-icon layui-icon-username"></i> </div> ``` 其中，`layui-input-inline`是一个layui的样式类，可以让input框和图标元素在同一行。`layui-icon`是一个layui的字体图标类，`layui-icon-username`表示要显示的图标，可以根据需求替换为其他图标。 3. 在JS文件中初始化layui，可以通过以下代码实现： ```html <script src="//cdn.bootcss.com/layui/2.4.5/layui.js"></script> <script> layui.use(['form'], function(){ var form = layui.form; //执行一个laydate实例 form.render(); }); </script> ``` 以上就是在input框内添加layui字体图标的步骤。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值