當我輸入並提交內容時，如何停止輸入表單以更改背景顏色和文本顏色？

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 的解決方案都可以。 我希望表單顏色始終保持黑色。 或者當您單擊輸入表單時，有沒有辦法阻止表單執行下拉建議？ 謝謝

我希望顏色總是看起來像底部的輸入表單，而不是像頂部的輸入表單那樣變白

Answer 1

Hover 效果

如果您不希望輸入顏色在懸停時更改，請刪除這段代碼：

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

Select 效果

如果您不希望在選擇時更改輸入顏色，請刪除這段代碼：

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

，從表單中刪除onclick="clickInput()"並刪除 function -

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
}

讓我知道這是否有幫助。