vue input自动填充改变背景色

最新推荐文章于 2024-08-06 13:33:28 发布
最新推荐文章于 2024-08-06 13:33:28 发布
阅读量1.8k 收藏 2
点赞数
文章标签： vue.js javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiazhendu/article/details/131965347
版权

改前： 

 

改后： 

 

 

/deep/.el-input__inner {
    border: none !important;
    height: 28px !important;
    line-height: 28px !important;
    color: rgba(255, 255, 255, 0.8);
    -webkit-text-fill-color: #ededed !important;
    background-color: transparent !important;
    transition: background-color 50000s ease-in-out 0s;
    caret-color: rgba(255, 255, 255, 0.5);
}

 

或者：

/deep/input {
    border: none !important;
    height: 28px !important;
    line-height: 28px !important;
    color: rgba(255, 255, 255, 0.8);
    -webkit-text-fill-color: #ededed !important;
    background-color: transparent !important;
    transition: background-color 50000s ease-in-out 0s;
    caret-color: rgba(255, 255, 255, 0.5);
}

-webkit-text-fill-color: #ededed !important;
    background-color: transparent !important;
    transition: background-color 50000s ease-in-out 0s; 主要这三句起作用

万物皆可狗
关注
Vue自定义指令-div根据输入框输入的颜色变化背景色
candy755的博客
09-13 9723
今天利用Vue自定义指令-做个div根据输入框输入的颜色变化背景色的效果图，注意的是，输入的颜色只针对英语和16进制的颜色，输入中文无效。代码奉上： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> &lt
去除input自动填充时的背景色
xxitcef的博客
06-23 5846
我想应该做过登录的页面的同学都遇到过这样的问题,input的自动填充功能会带有背景色，这样会影响美观，如下图 要想去掉这个背景色有两种方法： 1.给input设置属性autocomplete=“off”，意为关闭自动填充，不记录之前输入过的值。完全可以解决背景色的问题，但是没有自动填充功能体验相对来说不是很友好 2.通过css样式： <style lang="less"> input:-webkit-autofill { box-shadow:0 0 0 1000px white
关于登录的那些事（vue3+element plus）input输入框自动填充时，背景颜色自动改变的问题
c_x_m的博客
08-30 1623
登录
INPUT自动填充时候出现背景色问题
jorlin_sun的博客
08-06 124
INPUT自动填充时候出现背景色问题
关于input输入框自动填充密码后，出现背景颜色的问题解决
冰魂魄的博客
04-11 2173
inpuy自动填充密码时，点击密码会出现一个淡色的背景颜色
vue 登陆界面更改el-input背景颜色，用户名密码采用自动填充后颜色发生变化
Aa12364567的博客
12-30 1334
vue 登陆界面更改el-input背景颜色，用户名密码采用自动填充后颜色发生变化。
input 自动填充颜色改变
m0_50082421的博客
12-26 472
最近在项目中使用 input 自动填充昂账号，选择完账号之后输入框的会有背景颜色，所以需要更改输入框背景。
iOS表单input自动填充后背景色变为黄色
weixin_42556438的博客
01-18 1360
ios表单Input自动填充背景色变为黄色问题描述解决方案 问题描述 在开发页面的时候发现，在iOS上input框自动填充后input的背景色变为黄色，再点击一下就可以恢复正常。 解决方案 设置自动填充时的背景色 input::-webkit-autofill { transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #333333;//设置填充字体颜色 } ...
vue 简单自动补全的输入框的示例
11-30
`.select-item`具有一定的内边距和背景色，以及半透明效果。 总结来说，这个Vue组件实现了以下功能： 1. 用户在输入框中输入信息。 2. 按下回车键时，向后台发送请求获取匹配的建议。 3. 显示匹配的建议列表，用户...
vue+elementui中改变input框背景颜色与placeholder颜色
热门推荐
Simplify_Webpage的博客
11-26 1万+
vue+elementui中改变input框背景颜色改变input框背景颜色（透明背景）改变input框placeholder字体颜色 在解决过程中，可能是因为，elementui自带的样式会覆盖我后写的css样式。于是弃用改用原生。 改变input框背景颜色（透明背景） <input v-model="loginForm.username" class="noback" placeholder="请输入用户名/手机号" > /* 改变input框背景颜色 */ input:-webkit
Vue框架开发Electron12 - 动态改变Element-Ui默认el-Input背景样式
qq_39388660的博客
09-09 6129
Element-ui是一个非常好的UI设计模块，它提供给我们很多好看的按钮样式，非常适用于快速搭建UI，下面说说如果使用了element-ui之后，要更改它默认的el-Input样式应该怎么操作。 使用调试工具找出他的样式默认表，具体操作如下： 从上图知道默认的样式是.el-input__inner,那下面在改成自己想要的颜色： <style > .el-input__i...
vue里input根据value改变背景色的实例
10-17
今天小编就为大家分享一篇vue里input根据value改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
去掉chorme浏览器自动补全时input框的背景样式
haoyanyu_的博客
11-22 865
input开启自动补全后，选择内容后input框背景颜色变成了淡蓝色，手动填写的input背景不会变化，如下图：
input修改自动填充背景色
weixin_42333548的博客
06-28 1770
input 修改自动填充背景色
【css】如何修改input选中历史选项后，自动填充的蓝色背景色
hzxOnlineOk的博客
06-18 893
自动填充前： 自动填充后： 改变input自动填充背景颜色 方法二：(vue element-ui框架) css设置背景色 input标签添加autocomplete=“off” // 指定某个文本框取消自动填充 form表单添加autocomplete=“off” // 取消所有文本框元素的自动填充 transiton（过渡）详解： （1）语法PS：transition-duration 时长为0，不会产生过渡效果（2）transition-timing-function属性：
element中el-input 输入框 在自动填充（auto-complete=“on“）时，背景颜色会自动改变问题
zy的博客
08-29 1770
element中el-input 输入框 在自动填充（auto-complete="on"）时，背景颜色会自动改变问题
el-input 改变背景色
qq_63871756的博客
04-08 1863
给输入区域改变背景色
清除input自动填充背景色
cdd9527的博客
12-20 2030
清除input自动填充背景色
arco Desgin vue中<a-input 修改背景色
最新发布
09-10
Arco Design 是一款基于 Ant Design 设计理念的 UI 设计语言和组件库，其中 `<a-input>` 是它提供的一个输入框组件。要修改 Arco Design Vue 中 `<a-input>` 组件的背景色，可以通过修改 CSS 样式来实现。以下是基本的步骤： 1. 找到需要修改背景色的 `<a-input>` 组件。 2. 通过自定义样式的方式，添加或覆盖默认样式。 3. 使用 CSS 选择器定位到该组件，并设置你希望的背景色。 示例代码如下： ```css /* 定位到 .arco-input 类，并设置背景色为浅灰色 */ .arco-input { background-color: #f5f5f5 !important; } ``` 请注意，这里使用了 `!important` 来确保样式可以覆盖掉组件默认的样式。如果组件类名有变化或者使用了其他类来定义样式，需要相应地调整 CSS 选择器。 另外，如果你使用的是组件的某个特定状态（如聚焦、禁用、错误等），可能需要更详细的选择器来准确地定位到那种状态下的背景色，比如 `.arco-input-disabled` 用于禁用状态的输入框。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值