CSS控制input在弹出输入提示时不变色

发表于 更新于 本文字数： 549 阅读时长 ≈ 2 分钟

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

问题起源

最近在做的一个网站的登录页面，本来设计好好的，时间测试的时候却发现了一个比较严重的问题。

如下图所示，因为Chrome的用户名与密码输入提示，导致输入框变了颜色。与设计颜色完全不一样了。怎么办呢？

image.png

image.png

方案查找

不知道怎么解决，先去搜索吧~

以关键字“input 关闭输入提示”进行搜索，查找到一些解决方案。

一些相关文章：

  1. 关于浏览器自动展示用户名、密码等输入框的解决办法
  2. 点击密码input框禁止浏览器弹出已经记录的账号密码

文章中提出了多种实现方式，其中包括：

  1. autocomplete="off"，尝试了一下，无效，仍然变色
  2. 使用js在加载或者onload时进行重置操作，未尝试，将问题复杂化了
  3. 使用<form>标签和<input type=”password”/>来兼容Chrome与Safari，仍然太复杂，不好不好

最后，在我学习的项目vue-element-admin中找到了一种比较好的纯CSS的解决方案。

其中的几个自己不会用，不常用的关键点

关键点1：cater-color

cater-color：定义插入光标（caret）的颜色

文档链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/caret-color

关键点2：@supports

@supports: 指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明

文档链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports

方案选择

最终的实现代码：代码主要来源与修改花裤衩vue-element-admin项目中的登录页。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg:#fff;
  $light_gray:#fff;
  $cursor: #999999;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .el-input {
    display: inline-block;
    width: 100%;
    border-radius: 6px;

    input {
      background: transparent;
      border: 1px solid #E5E5E5;;
      -webkit-appearance: none;
      border-radius: 6px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }

    input:focus {
      border-color: #555555;
    }
  }
</style>