如何禁止输入表单输入提交时变色并关闭输入自动下拉提示？

• webkit内核浏览器对表单控件的原生样式优先级高于普通自定义CSS，尤其是自动填充触发的-webkit-autofill伪类状态，会强制覆盖自定义的背景、文字色，之前仅覆盖hover、focus状态的规则没有命中这个场景，是输入框激活后发白的核心原因
• 内联属性onchange="backgroundColor: rgba(0,0,0,0.7)"为语法错误：onchange需要绑定合法JS代码，此处直接写CSS属性完全不生效
• 直接用JS修改内联样式的方案优先级低于浏览器原生控件默认样式，因此无法达到预期效果

1. 替换为覆盖全状态的CSS样式 #

.button{
    outline-color: rgba(0,0,0,0.7);
    width:290px;
    margin: 20px 10px 10px 5px;
    height:80px;
    font-size:44px;
    color:orange;
    background-color:rgba(0,0,0,0.7);
    border: 0;
    border-bottom:2px solid black;
    cursor:pointer;
    /* 移除input默认原生外观的样式干扰 */
    -webkit-appearance: none;
    border-radius: 0;
} 

/* 统一所有交互状态下的样式 */
.button:hover,
.button:focus,
.button:active{
    background-color:rgba(0,0,0,0.7) !important;
    color: orange !important;
    outline: none;
    /* 若需要保留focus时输入框加宽的效果，可将width值改回300px */
    width: 290px;
}

/* 重点：覆盖Chrome内核下自动填充的强制默认样式，解决激活时发白的问题 */
input.button:-webkit-autofill,
input.button:-webkit-autofill:hover,
input.button:-webkit-autofill:focus,
input.button:-webkit-autofill:active{
    /* 用超大内阴影撑满输入框，绕过浏览器对autofill状态的背景色强制限制 */
    -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.7) inset !important;
    -webkit-text-fill-color: orange !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: orange;
}

2. 调整HTML结构 #

• 移除两个输入框上无效的onchange属性
• 给每个输入框添加autocomplete="off"属性，直接关闭点击输入框时弹出的历史输入下拉提示
• 纯CSS已能实现全状态颜色固定，原绑定的clickInput() JS函数可直接删除，无需保留
  修正后的HTML结构：

<form action="" onsubmit="return submitMove()">
    <label class="lable">First Coordinate</label>
    <div>
        <input 
            class="button" 
            type="text" 
            id="currentCoordinate"
            autocomplete="off"
        >
    </div>
    <lable class="lable">Second Coordinate</lable>
    <div>
        <input 
            class="button" 
            type="text" 
            id="moveToCoordinate"
            autocomplete="off"
        >
    </div>
    <button class="button" type="submit">Submit move</button>
</form>

• 输入框在hover、focus、内容输入、自动填充、点击提交等所有场景下，都会保持半透明黑色背景+橙色文字的固定样式，不会出现发白、色值跳变的问题
• 点击输入框时不会弹出历史输入的下拉提示
• 提交按钮的样式也会全程保持统一，不会因交互状态出现颜色变化

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