当我输入和提交内容时，如何停止输入表单以更改背景颜色和文本颜色？

Question

.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;
} 
.button:hover{
        background-color:rgba(0,0,0,0.7);
    }
    
.button:focus{
        background-color: rgba(0,0,0,0.7);
        width: 300px;
}



<form action="" onsubmit="return submitMove()">
        <label class="lable">First Coordinate</label>
        <div><input class="button" type="text" id="currentCoordinate" onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
        <lable class="lable">Second Coordinate</lable>
        <div><input class="button" type="text" id="moveToCoordinate"  onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
        <button class="button" onclick="clickInput()">Submit move</button>
    </form>




function clickInput() {
    document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
    document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}

我想要的是让输入字段完全不改变颜色。我根本做不到。任何需要 CSS 或 javascript 的解决方案都可以。我希望表单颜色始终保持黑色。或者当您单击输入表单时，有没有办法阻止表单执行下拉建议？谢谢

I want the color to always be looking like the input form on the bottom, and not whitening up like the input form on top

Answer 1

悬停效果

如果您不希望输入颜色在悬停时改变，请删除这段代码：

.button:hover{
        background-color:rgba(0,0,0,0.7);
    }

选择效果

如果您不希望在选择时更改输入颜色，请删除这段代码：

.button:focus{
        background-color: rgba(0,0,0,0.7); // Remove this line
        width: 300px;
}

，从Form中移除onclick="clickInput()"并移除函数-

function clickInput() {
    document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
    document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}

输入变化效果

如果不希望输入框的数据发生变化时输入颜色也发生变化，去掉这段代码：

onchange="backgroundColor: rgba(0,0,0,0.7)"

浏览器效果

这是浏览器添加的默认样式（大多数情况下为蓝色轮廓）以克服此问题：

.button:focus{
        outline: none; // Add this line
}