在 CSS 或 JavaScript 中不更改背景顏色的情況下將輸入字段設為只讀

Question

我想將 HTML 輸入字段設為只讀，但不會在我添加屬性 readonly 時出現灰色背景（它應該看起來與普通字段相同，只是不允許編輯）。

有沒有辦法可以在 CSS 和/或 JS 中實現這一點，最好是使用類？

示例字段：

<input type="text" style="width:96%" class="myClass" />

Answer 1

我想你誤認為禁用和只讀

<input type="text" value="readonly" readonly>
<input type="text" value="disabled" disabled>

看看這個小提琴： http : //jsfiddle.net/36UwE/

如您所見，只有禁用的輸入是灰色的（在 Windows 上使用最新的 Chrome 和 IE 進行了測試）

但是，這可能會有所不同，具體取決於瀏覽器、操作系統等。 您可以使用 css 自定義顯示：

input[readonly] {
  background-color: white;
}

Answer 2

是的，您可以使用 :disabled 偽類，例如

input.myClass:disabled {
    /* style declaration here */
}

Answer 3

雖然您可以使用 :disabled、:readonly 或 .myClass CSS 選擇器應用任何樣式，但請注意，不同的瀏覽器/平台將以不同的方式呈現標准、只讀和禁用的輸入字段，因此嘗試根據默認值覆蓋顏色、邊框和背景對於您的平台（例如 Windows）可能會破壞其他平台（例如 Mac）上的樣式。

覆蓋用戶期望的默認樣式提示通常不是一個好主意，但如果您必須這樣做，那么您應該確保只讀/禁用的輸入字段與標准輸入字段在視覺上可區分，並使用非平台特定的自定義樣式。

Answer 4

<input type="text" class="form-control" value="MyText" readonly />

<style>
    input.form-control:read-only {
        background-color: #fff;
    }
</style>

或者

<input type="text" class="form-control" value="MyText" style="background-color: #fff;" readonly />

更多信息在這里。