CSS浏览器自动填充样式不符合预期的问题排查

我纯用CSS开发网站登录模块，希望为页面元素的点击、悬浮、无效、禁用等状态提供视觉反馈，但最新版Google Chrome的自动填充功能打乱了原有样式效果。

当前样式工作逻辑 #

• 禁用状态：输入框无焦点，Enter按钮应用禁用样式
• 默认状态：输入框获焦时样式改变；输入文本后Enter按钮样式变化，该状态下按钮拥有:hover和:active样式
• 激活状态（输入内容后失焦）：输入框边框和标签文本颜色改变，与未输入时不同

遇到的问题 #

1. 悬浮在自动填充列表上时，输入框预览填充内容的状态无法设置样式；选择填充选项后，font-size才调整，其他样式通过以下代码可正常生效：

.auth input[type="text"]:-webkit-autofill,
.auth input[type="text"]:-webkit-autofill:focus {
    transition: all 600000s 0s;
}

2. 自动填充后失焦，仅标签样式正常，输入框失焦样式失效；手动删除再输入则样式正常。

解决方案 #

问题1：自动填充预览状态的字体跳变 #

Chrome没有公开针对自动填充预览状态的CSS伪类，但可以通过统一输入框和自动填充状态的字体样式，避免选完填充内容后的字体跳变：

1. 在输入框基础样式中添加-webkit-text-fill-color统一文本颜色，同时指定font-size的过渡动画
2. 调整:-webkit-autofill的过渡属性，确保字体大小即时生效

修改后的核心样式片段：

.auth input[type="text"] {
    /* 原有样式保留 */
    display: block;
    border: 1px solid #313452;
    font-size: 20px;
    color: #1864c9;
    width: 100%;
    height: 55px;
    padding: 0 15px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    background-color: transparent;
    outline: none;
    border-radius: 5px;
    /* 新增内容 */
    -webkit-text-fill-color: #1864c9;
    transition: font-size 0.1s ease, border-color 0.1s ease;
}

.auth input[type="text"]:-webkit-autofill,
.auth input[type="text"]:-webkit-autofill:focus {
    transition: all 600000s 0s, font-size 0.1s ease;
    font-size: 20px;
    -webkit-text-fill-color: #1864c9;
}

问题2：自动填充后失焦的输入框样式失效 #

Chrome自动填充后，:not(:placeholder-shown)伪类可能不会触发，需要用:-webkit-autofill结合:not(:focus)来强制应用失焦状态的样式：

/* 自动填充后失焦的输入框边框样式 */
.auth input[type="text"]:-webkit-autofill:not(:focus) {
    border: 2px solid rgba(26,115,232,0.25);
}

/* 自动填充后失焦的标签文本颜色 */
.auth input[type="text"]:-webkit-autofill:not(:focus) ~ .input-label {
    color: rgba(24,100,201,0.50);
}

完整修改后的CSS代码 #

body {
    padding: 0;
    margin: 0;
    line-height: 24px;
    font-family: "Tahoma", Helvetica, Arial;
    font-size: 12px;
    background: #1c1e2f;
}
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    outline: none;
    padding: 0px;
    margin: 0px;
}
.container {
    position: relative;
    background-color: #222437;
    background-clip: border-box;
    border: 1px solid #313452;
    border-radius: 6px;
    color: white;
    margin-bottom: 15px;
}
.justify-content-center {
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center ;
}
.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
button {
    border: none;
    padding: 0px;
    margin: 0px;
    background: none;
    cursor: pointer;
}


.auth {
    width: 300px;
    padding: 15px;
}

.auth input[type="text"] {
    display: block;
    border: 1px solid #313452;
    font-size: 20px;
    color: #1864c9;
    width: 100%;
    height: 55px;
    padding: 0 15px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    background-color: transparent;
    outline: none;
    border-radius: 5px;
    /* 新增：统一自动填充文本颜色和过渡 */
    -webkit-text-fill-color: #1864c9;
    transition: font-size 0.1s ease, border-color 0.1s ease;
}
.auth .inputs {
    position: relative;
    margin: 16px 0 0 0;
}
.auth .input-label {
    position: absolute;
    top: 15px;
    font-size: 1.1rem;
    left: 14px;
    color: rgb(122, 122, 122);
    font-weight: 100;
    transition: 0.1s ease;
    background-color: #222437;
    padding: 0 5px;
}
.auth label:before { display: none; }
.auth input[type="text"]:focus ~ .input-label {
    top: -12px;
    color: #1864c9;
    font-size: 13px;
    background-color: #222437;
    z-index: 2;
}
.auth input[type="text"]:target ~ .input-label {
    top: -7px;
    color: #1864c9;
    font-size: 13px;
    z-index: 2;
}
.auth input[type="text"]::placeholder { opacity: 0; }
.auth input[type="text"]:not(:placeholder-shown) { border: 2px solid rgba(26,115,232,0.25); }
.auth input[type="text"]:not(:placeholder-shown):focus { border: 2px solid rgba(26,115,232,1.00); }
.auth input[type="text"]:not(:placeholder-shown) ~ .input-label {
    top: -12px;
    font-size: 13px;
    z-index: 2;
}
.auth input[type="text"]:not(:placeholder-shown):focus ~ .input-label { color: #1864c9; }
.auth input[type="text"]:not(:placeholder-shown) ~ .input-label { color: rgba(24,100,201,0.50); }
.auth .input:focus { border: 2px solid #1a73e8; }
.auth .link-btn {
    height: 20px;
    text-decoration: none;
    color: #1864c9;
}
.auth .submit {
    float: right;
    height: 38px;
    margin-top:10px;
    padding: 0 25px;
    border-radius: 5px;
    cursor: not-allowed;
    color: #313452;
    border: 1px solid #313452;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit {
  background-color: #1a73e8;
  color: white;
  cursor: pointer;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit:hover {
    background-color: #6CA5F0;
    color: #7C7C7C;
    cursor: pointer;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit:active {
    background-color: #0D4186;
    color: #AAAAAA;
    cursor: pointer;
}
/* 调整自动填充样式 */
.auth input[type="text"]:-webkit-autofill,
.auth input[type="text"]:-webkit-autofill:focus {
    transition: all 600000s 0s, font-size 0.1s ease;
    font-size: 20px;
    -webkit-text-fill-color: #1864c9;
}
/* 补充自动填充失焦样式 */
.auth input[type="text"]:-webkit-autofill:not(:focus) {
    border: 2px solid rgba(26,115,232,0.25);
}
.auth input[type="text"]:-webkit-autofill:not(:focus) ~ .input-label {
    color: rgba(24,100,201,0.50);
}

HTML代码（保持不变） #

<div class="flex-row d-flex justify-content-center">
    <div class="container auth">
        <form method="post">
            <div class="inputs">
                <input type="text"  name="api_key" class="input"  placeholder="api key">
                <label class="input-label">Enter Key</label>
                <button class="submit"  value="Login">Enter</button>
            </div>
        </form>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Tyler