Chrome谷歌浏览器记住密码的背景色修改

最新推荐文章于 2024-01-08 10:00:41 发布

Beam007

最新推荐文章于 2024-01-08 10:00:41 发布

阅读量1.3k

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/Beam007/article/details/86741734

版权

博客探讨了如何在Chrome浏览器中修改记住密码的背景色，同时保持记住密码功能。作者尝试了不同的方法，包括设置内阴影透明度、触发事件等，最终推荐方案是在H5中添加autofocus属性。此外，文章还提到了在IE浏览器中遇到的输入框文字显示、兼容性及其他问题的解决方案。

摘要由CSDN通过智能技术生成

查资料的各种解决办法

比如：
autocomplete=“off”
autocomplete=“new-password”
……
等等等我这里都用不上！！！因为我需要满足如下要求：
1、必须要记住密码这个功能
2、背景色尽量透明
3、提示“账号”需要在input框内，输入内容时移动至框的上部分

试探方法一

input {
	-webkit-box-shadow: 0 0 0px 1000px rgba(24, 130, 168, 1) inset;
	-webkit-text-fill-color: #00c0ff;
}

但是这里设置了以后，我的“账号”提示会被遮挡，如果直接调整内阴影的透明度，黄色的背景色又会出来。
所以思考，在input框有内容时加上内阴影，在input框为空时去掉该样式，所以修改为如下：

试探方法二

<input type="text" :class="{coverShadow: coverUser}" v-model="username" @keyup.enter="loginMethod()">

data () {
    return {
      username: '',
      coverUser: false
    }
},
watch: {
    username (val) {
      if (val === '') {
        this.coverUser = false