web-dev-qa-db-ja.com

CSSまたはJavaScriptで背景色を変更せずに入力フィールドを読み取り専用にする

HTML入力フィールドを読み取り専用にしたいのですが、属性を読み取り専用に追加したときに表示される灰色の背景が表示されません（編集を許可しない通常のフィールドと同じように見えるはずです）。

CSSやJSで、理想的にはクラスでこれを実現する方法はありますか？

フィールド例：

<input type="text" style="width:96%" class="myClass" />
javascripthtmlcssbackground-colorreadonly
10
user2571510

はい、：disabled疑似クラスを使用できます。

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

無効で読み取り専用と間違えたと思います

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

このフィドルを見てください： http://jsfiddle.net/36UwE/

ご覧のとおり、無効になっている入力のみが灰色になっています（最新のChrome＆IE）を使用してWindowsでテスト済み）

ただし、ブラウザやオペレーティングシステムなどによって異なる場合があります。 cssでカスタム表示を使用できます。

input[readonly] {
  background-color: white;
}
20
Anthony Garcia-Labiad

：disabled、：readonly、または.myClass CSSセレクターを使用して任意のスタイルを適用できますが、ブラウザー/プラットフォームが異なれば、標準、読み取り専用、および無効の入力フィールドのレンダリングが異なるため、デフォルトに基づいて色、境界線、背景を上書きしようとすることに注意してください。ご使用のプラットフォーム（Windowsなど）では、他のプラットフォーム（Macなど）のスタイルが崩れる可能性があります。

通常、ユーザーが期待するデフォルトのスタイリングキューを上書きすることはお勧めできませんが、これを行う必要がある場合は、読み取り専用/無効の入力フィールドが標準の入力フィールドと視覚的に識別できることを確認し、プラットフォーム固有ではないカスタムスタイルを使用する必要があります。

3
darsh