CSSでreadonly属性をスタイルする方法は？

現在、フィールドを無効にするためにreadonly = "readonly"を使用しています。CSSを使用して属性のスタイルを設定しようとしています。私は使ってみました

input[readonly] {
/*styling info here*/
}

しかし、それは何らかの理由で機能していません。私も試しました

input[readonly='readonly'] {
/*styling info here*/
}

それも機能しません。

CSSでreadonly属性のスタイルを設定するにはどうすればよいですか？

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

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

注textarea[readonly="readonly"]あなたが設定されている場合に機能readonly="readonly"HTMLではなく、あなたが設定されている場合、それは仕事をしないreadOnlyに-attributeをtrueまたは"readonly"JavaScriptで。

JavaScriptで設定readOnlyした場合に CSSセレクターを機能させるには、セレクターを使用する必要がありますtextarea[readonly]。

Firefox 14とChrome 20で同じ動作。

安全のために、私は両方のセレクターを使用します。

textarea[readonly="readonly"], textarea[readonly] {
...
}

安全のために、両方を使用したい場合があります...

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

readonly属性は「ブール属性」であり、空白または「読み取り専用」（有効な値のみ）のいずれかになります。http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

jQueryの.prop('readonly', true)関数などを使用している場合は、が必要[readonly]になりますが、使用している.attr("readonly", "readonly")場合はが必要になり[readonly="readonly"]ます。

修正： を使用する必要があるだけですinput[readonly]。含めることinput[readonly="readonly"]は冗長です。見るhttps://stackoverflow.com/a/19645203/1766230をください

ここにはたくさんの答えがありますが、私が使用する答えを見たことはありません。

input[type="text"]:read-only { color: blue; }

疑似セレクターのダッシュに注意してください。readonly="false"このセレクターは、値に関係なくreadonlyの存在をキャッチするため、入力の場合もそれをキャッチします。false仕様上、技術的には無効ですが、インターネットは完璧な世界ではありません。そのケースをカバーする必要がある場合、これを行うことができます：

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea 同じように機能します：

textarea:read-only:not([read-only="false"]) { color: blue; }

htmlのは今だけでなく、サポートしていることに注意してくださいtype="text"、しかし、他のテキストタイプなAのスルーnumber、tel、email、date、time、url、などは、それぞれのセレクタに追加する必要があります。

これを行うにはいくつかの方法があります。

最初は最も広く使用されています。すべての主要なブラウザで動作します。

input[readonly] {
 background-color: #dddddd;
}

上の1つはreadonlyアタッチされたすべての入力を選択しますが、以下の1つは必要なものだけを選択します。必要demoな入力タイプに置き換えてください。

input[type="demo"]:read-only {
 background-color: #dddddd;
}

これは最初のものに代わるものですが、あまり使われていません：

input:read-only {
 background-color: #dddddd;
}

:read-onlyセレクタはクローム、オペラ、およびSafariでサポートされています。Firefoxはを使用し:-moz-read-onlyます。IEは:read-onlyセレクターをサポートしていません。

を使用することもできますがinput[readonly="readonly"]、これはinput[readonly]私の経験から、とほぼ同じです。

input[readonly], input:read-only {
    /* styling info here */
}

シャウドは読み取り専用入力フ​​ィールドのすべてのケースをカバーしています...

Onlyの最初の文字を大文字にします

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

IDで入力を選択input[readonly="readonly"]し、CSSにタグを追加すると、次のようになります。

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

それはうまくいきません。親クラスまたはIDを選択してから、入力を選択する必要があります。何かのようなもの：

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

仕事で新しいチケットを待っている間の私の2セント：D

以下を使用して、すべてのブラウザーで機能します。

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }