正文 

当前位置： 首页 > 源码 >

在自动完成表单上将输入背景更改为透明

     2023-02-22     167

关键词：

【中文标题】在自动完成表单上将输入背景更改为透明【英文标题】：Change Input background to transparent on autocomplete form 【发布时间】：2015-06-17 07:26:38 【问题描述】：

当浏览器自动完成我的表单时，我想将背景颜色设置为对我的输入透明，目前看起来像添加的图像，有人知道如何实现吗？

我试过了，但它设置为白色，边框是默认黄色的样式，我希望文本的颜色也为白色。

input:-webkit-autofill 
    -webkit-box-shadow: 0 0 0px 1000px white inset;

看起来是这样的：

提前致谢:)

【问题讨论】：

你想要white 背景而不是transparent？ 是透明的，但这是我找到的示例，所以我需要在输入中使用白色文本使其透明 -webkit-text-fill-color?和background-color?可能重复：***.com/questions/2781549/… 【参考方案1】：

最后我用这段代码得到了结果：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;

【讨论】：

这是什么：5000s in background-color 去除背景色的过渡时间 没有缺陷。在 chrome 中测试了近 20 种解决方案后工作正常【参考方案2】：

感谢martinezjc 的想法，但如果我们让页面打开一段时间，我们会注意到背景变化

我们可以使用 css 动画和前向填充模式消除过渡，以使背景颜色永久化

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;


@keyframes autofill 
    100% 
        background: transparent;
        color: inherit;
    


@-webkit-keyframes autofill 
    100% 
        background: transparent;
        color: inherit;

用你的颜色替换透明

【讨论】：

很好，我喜欢这个。为了改变颜色，我们必须经历的所有废话真是太神奇了。 这个方案比较稳定。 1. 这不会在一段时间后改变颜色 2. 如果您尝试用姓名、地址、电话等填写地址，那么这个解决方案 ROCKS（第一个解决方案只防止更改字段中的颜色变化）。 完美！谢谢。 @CaptainAdmin 请注意，此解决方案在桌面 Safari 中根本不起作用。【参考方案3】：

使用它来节省您的时间

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
   -webkit-transition-delay: 9999s;
   transition-delay: 9999s;

【讨论】：

这很简单，而且效果很好！最佳解决方案 IMO。 不仅这似乎是唯一对我有用的，而且太短了！ 感谢您成为这么好的人。自动填充只是......你知道的。【参考方案4】：

经过数小时的搜索，这是适用于 jquery 和 javascript 的最佳代码，这意味着它可以根据请求使字段透明

     input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;


@keyframes autofill 
    100% 
        background: transparent;
        color: inherit;
    


@-webkit-keyframes autofill 
    100% 
        background: transparent;
        color: inherit;

完美的好

【讨论】：

如何在swift 3上将UITableViewController的背景颜色更改为渐变色

】如何在swift3上将UITableViewController的背景颜色更改为渐变色【英文标题】：HowtochangethebackgroundcolorofUITableViewControllertogradientcoloronswift3【发布时间】：2017-03-2517:29:47【问题描述】：我想将我的UITableViewController背景颜色更改为渐变色... 查看详情

在移动设备上将 Bootstrap 布局从内联表单更改为网格

】在移动设备上将Bootstrap布局从内联表单更改为网格【英文标题】：ChangeBootstraplayoutfrominlineformtogridonmobiledevice【发布时间】：2016-08-2122:02:39【问题描述】：我有一个复杂的Web表单，其中一行包含许多字段。Bootstrap内联表单在大... 查看详情

如何在 Android 上将“选择操作”更改为“使用完成操作”？

】如何在Android上将“选择操作”更改为“使用完成操作”？【英文标题】：Howtochange"Chooseanaction"to"Completeactionusing"onAndroid?【发布时间】：2012-08-2918:02:08【问题描述】：我有一个NFC应用程序，它允许用户扫描他们的... 查看详情

在焦点 jquery 上将占位符输入类型文本更改为密码

】在焦点jquery上将占位符输入类型文本更改为密码【英文标题】：Changeplaceholderinputtypetexttopasswordonfocusjquery【发布时间】：2012-09-2705:05:23【问题描述】：好的，我有一个输入标签。我使用了jquery输入提示，因此它显示了title="passwo... 查看详情

在移动屏幕尺寸上将按钮更改为“btn-block”

...block类？目前我有一个包含3个下拉菜单和两个按钮的行的表单，在大屏幕和中屏幕上看起来都很好。当表单在小屏幕上发生变化，并且表 查看详情

在android应用程序中将软键背景从黑色更改为透明

】在android应用程序中将软键背景从黑色更改为透明【英文标题】：changesoftkeysbackgroundfromblacktotransparentinandroidapp【发布时间】：2015-12-0109:36:59【问题描述】：我想在我的应用程序中将软键（不确定这些按钮的名称）背景从黑色更... 查看详情

如何在chrome自动完成上删除蓝色背景

】如何在chrome自动完成上删除蓝色背景【英文标题】：howtoremovebluebackgroundonchromeautocomplete【发布时间】：2019-08-0313:02:02【问题描述】：我正在制作一个表单并希望每个输入都是透明的，但是当我使用Chrome中的自动完成功能然后Tab... 查看详情

如何在开始滚动和透明后将角度材质工具栏背景颜色更改为白色？

】如何在开始滚动和透明后将角度材质工具栏背景颜色更改为白色？【英文标题】：Howtochangeangularmaterialtoolbarbackground-colortowhiteafterscrollingandtransparentinstart?【发布时间】：2021-08-1819:47:31【问题描述】：我正在尝试使用角度材料将... 查看详情

当用户在表格视图中向下滚动时，如何将 UINavigationBar 背景颜色从透明更改为红色

】当用户在表格视图中向下滚动时，如何将UINavigationBar背景颜色从透明更改为红色【英文标题】：HowtochangeUINavigationBarbackgroundcolorfromcleartoredwhenuserscrollsdowninthetableview【发布时间】：2018-01-2411:29:05【问题描述】：我在它前面有一... 查看详情

使用 javascript 和 HTML 在 IOS 上将“return”/“Go”键更改为“Next”

...述】：我想要做的是将他的返回键更改为我尝试过的HTML表单的iPad上的下一个键$(document 查看详情

不透明度 - 使用 CSS 从背景更改为背景

】不透明度-使用CSS从背景更改为背景【英文标题】：Opacity-changingfrom-toforbackgroundwithCSS【发布时间】：2013-08-0222:01:41【问题描述】：我有以下带背景的元素：例如，我想将其不透明度设置为从0变为1。是否可以仅使用CSS来实现？... 查看详情

为啥我的 jQuery 自动完成背景是透明的？

】为啥我的jQuery自动完成背景是透明的？【英文标题】：WhyismyjQueryautocompletebackgroundtransparent?为什么我的jQuery自动完成背景是透明的？【发布时间】：2019-04-0622:12:09【问题描述】：我正在使用DevBridge\'sAutocomplete，效果很好，但我... 查看详情

在 Woocommerce 中自动将订单状态从处理更改为完成

】在Woocommerce中自动将订单状态从处理更改为完成【英文标题】：AutochangeorderstatusfromprocessingtocompletedinWoocommerce【发布时间】：2019-06-0122:46:05【问题描述】：如果“正在处理”状态将自动更新为“已完成”，我想更改来自woocommerce... 查看详情

如何解决在chrome中自动完成表单后input出现黄色背景

可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：代码如下:　　input:-webkit-autofill{-webkit-box-shadow:000px1000pxwhiteinset;border:1pxsolid#CCC!important;} 查看详情

如何在 TEdit onkeyup 事件上将字符更改为星号？

】如何在TEditonkeyup事件上将字符更改为星号？【英文标题】：HowchangecharacterstoasteriskonTEditonkeyupevent?【发布时间】：2016-12-0420:09:30【问题描述】：我的客户要求我制作一个“效果”，每次释放键盘的任何键时，将此字符更改为字... 查看详情

如何在 iOS 上将所有 onClick 事件更改为 TouchStart？

】如何在iOS上将所有onClick事件更改为TouchStart？【英文标题】：HowtochangeallonClickeventstoTouchStartoniOS?【发布时间】：2011-06-2912:28:03【问题描述】：在iOS浏览器(demo)上执行之前，OnClick事件有大约400毫秒的超时。我想将它更改为所有具... 查看详情

使用 UISlider 在 MKMapView 上将半径更改为 MKCircle

】使用UISlider在MKMapView上将半径更改为MKCircle【英文标题】：ChangeradiustoMKCircleonMKMapViewwithUISlider【发布时间】：2013-07-0314:52:55【问题描述】：我正在尝试通过移动UISlider来更改MKCircle的半径。问题是MKCircle的radius属性是只读。我是... 查看详情

如何在 mac 上将 docker 存储驱动程序更改为 devicemapper

】如何在mac上将docker存储驱动程序更改为devicemapper【英文标题】：howcanIchangedockerstoragedrivertodevicemapperonmac【发布时间】：2017-01-0623:11:43【问题描述】：我正在尝试将存储驱动程序更改为mac上的devicemapper。并按照Changedockerstoragedrive... 查看详情