web-dev-qa-db-ja.com

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

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

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

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

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

それもうまくいきません。

CSSでreadonly属性をどのようにスタイルすることができますか？

htmlcsscss-selectors
143
Daphne
input[readonly]
{
    background-color:blue;
}

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

198
Curt

HTMLでtextarea[readonly="readonly"]を設定した場合はreadonly="readonly"は機能しますが、JavaScriptを使用してreadOnly-属性をtrueまたは"readonly"に設定した場合は機能しません。

CSSセレクタが動作するようにするにはJavaScriptでreadOnlyを設定した場合、セレクタtextarea[readonly]を使用する必要があります。

Firefox 14とChrome 20で同じ動作をします。

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

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

安全のためにあなたは両方を使用したいかもしれません...

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

Readonly属性は "ブール属性"で、空白または "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/17662 を参照してください。

22
Luke

ここにはたくさんの答えがありますが、私が使っているものは見たことがありません。

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"だけでなく、number、tel、email、date、time、urlなど、多数の他のテキスト型をサポートするようになりました。それぞれをセレクタに追加する必要があります。

20
IAmNaN

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

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

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

上のものはreadonlyが添付されたすべての入力を選択しますが、下のものはあなたが望むものだけを選択します。 demoは、必要な入力タイプに必ず置き換えてください。

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

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

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

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

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

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

大声でカバーすべての場合読み取り専用の入力フィールドの場合...

4
Serge

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

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

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

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

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

2
softwareplay

すべてのブラウザで動作させるには、以下を使用してください。

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

onlyの最初の文字を大文字にする

input[readOnly] {
      background: red !important;
    }
<input type="text" name="country" value="China" readonly="readonly" />
1
王小陌