[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fx8xBBhZQIOts4b4EeJTZlL2AW8JYq5QvKHUmZcLN3Ns":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},120,"2024-07-31T03:45:41.753Z","uni-app中的输入框input: uni-easyinput，自动填充账号密码的背景色","## 背景\n在前端开发中，输入框input标签，在Safari或者Chrome浏览器上显示网页时，经常会出现keychain或者Google密码的自动填充提示。当使用这个填充提示时，浏览器会把账号和密码自动填充到输入框中，并且改变输入框的背景色，但是背景色就容易和现有的网页的背景色不协调。所以需要去解决这个问题。\n\n## 示例\n未输入状态：\n![未输入状态](https://image.xinwei.ltd/image1722396490031.png)\n\n在Safari中准备输入时，Safari自动在输入框右侧显示了账号/密码填充按钮：\n![Safari的账号密码填充](https://image.xinwei.ltd/image1722396537516.png)\n\n选择自动填充：\n![Safari账号密码填充](https://image.xinwei.ltd/image1722396597898.png)\n\n填充之后的样式，发现被Safari修改了：\n![Safari自动填充后样式被修改了](https://image.xinwei.ltd/image1722396642478.png)\n\n这种UI显示极其不协调，所以需要去修改。但是在检查html元素时，你会发现，直接在css中对input标签设置背景色也解决不了。\n![safari查看input标签](https://image.xinwei.ltd/1%20%281%291722397264339.png)\n\n\n## 解决方案\n在网上查找一些解决方案时，很多是直接在input标签设置auto-fill相关的样式，比如以下：\n```css\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover, \ninput:-webkit-autofill:focus, \ninput:-webkit-autofill:active  {\n    transition: background-color 5000s;\n    -webkit-text-fill-color: #fff !important;\n}\n```\n\n但是我当前是使用的uni-app这个框架，直接设置input的标签并不会直接生效，所以采用以下的方法：\n```scss\n:deep(.uni-input-input) {\n  color: white !important;\n  -webkit-text-fill-color: white !important;\n  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;\n  background-color:transparent !important;\n  background-image: none !important;\n  transition: background-color 50000s ease-in-out 0s !important; //背景色透明 生效时长 过渡效果 启用时延迟的时间\n}\n```\n\n我在uni-app框架下使用的是`uni-easyinput`输入框:\n```uni-app, xxx.vue\n\u003Cuni-easyinput\n  class=\"input\"\n  :class=\"{ 'input-empty' : email.trim().length \u003C= 0, 'input-error' : emailError.trim().length > 0 }\"\n  placeholder=\"Email\"\n  placeholder-style=\"color:#8C8C8C;font-family:'gilroy-medium';font-size:32rpx;text-align:left\"\n  style=\"color: white;\"\n  :clearable=\"false\"\n  v-model=\"email\"\n/>\n```\n\n效果：\n![输入框input修改后](https://image.xinwei.ltd/image1722397520758.png)\n\n\n希望对大家有帮助。\n\n\n\n\n\n\n","在前端开发中，输入框input标签，在Safari或者Chrome浏览器上显示网页时，经常会出现keychain或者Google密码的自动填充提示。当使用这个填充提示时，浏览器会把账号和密码自动填充到输入框中，并且改变输入框的背景色，但是背景色就容易和现有的网页的背景色不协调。所以需要去解决这个问题。","https://image.xinwei.ltd/image1722396490031.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",1690,0,"input tag,input color,input tag web,web input,input颜色,输入框修改颜色"]