ある属性クラスが適用されていない要素に適用するCSSは どのように記述しますか？

Question

標題のとおりですが、現況INPUT要素に対して以下のCSSを外部ファイルで定義しています。

input[type='text'], textarea {
	background-color: #EEFFFF;
	color: #0000FF;
}

input[readonly] {
	background-color: #FFFFDF;
	color: #0000FF;
}

これが適用されるWebページに、JSで適時ReadOnlyのTrue・Falseを切替えるようにしているのですがこの動作にひもづいて背景を替えたいと考えています。
（ReadOnly=True⇒背景#FFFFDF、ReadOnly=False⇒背景#EEFFFF）

上段のCSS定義を、ReadOnlyがFalseのとき限定と追記できれば　と思うのですが
どういった記述を行えばよろしいのでしょうか？
:not()で書くのでしょうか、ちなみに以下のようにtype=textかつReadonlyではないという併記を試行したところ失敗、この定義は無効になっています。

input[type='text']:not[readonly], textarea {
	background-color: #EEFFFF;
	color: #0000FF;
}

【14：50編集】
皆様の支援でreadonlyが適用されていない要素には、背景色を#EEFFFFとするCSSを定義できたようです。
但し、ブラウザの開発ツールをみると、その定義は無効=別の定義で上書かれてしまっているようです。
以下の画像は既にReadOnlyがFalseになった状況で（当該input要素の内容を変更できるのでReadOnlyは外れているに違いない）、ブラウザの開発ツールを起動し当該要素部分のスタイルを確認しているところです。右側の緑枠で囲んだ部分についてですが、上段が現況採用されているスタイルで、下段が無効になってしまったスタイルという認識は正しいでしょうか？また、そうであった場合、上段は何の制御から設定されたスタイル・背景なのかうかがいしれないでしょうか（スタイルシートの行番号の記載がないということはJSの仕業？）

Comments

[m.ts10806]

> :not()で書くのでしょうか
まずやってみては。現状「問題・課題が含まれていない」質問です。

[saya24]

ご見解をありがとうございます。
本文に試行したCSSの定義を追記しました。input要素でtype=textかつreadonlyではない、という条件併記をしたいのですが、その記述方法が分かりません。

[azuapricot]

デフォルトがread-onlyなしで、read-onlyがついているときだけCSSを反映という風にしたほうがCSSもコンパクトで良いと思うのですがそれではいけない理由がなにかあるんでしょうね、きっと。

[saya24]

read-onlyなしにした時、背景色が元に戻ってくれるのなら（デフォルトの背景色#EEFFFF）、今回のようなことは必要ありません。戻る筈なのかな．．．？？？
ブラウザの開発ツールで、当該の要素に適用された一連（順序だてて）のCSSが確認できるので、これを再確認してみますね。（自分が気が付いていないJSが意図せず背景を替えられている恐れを今更ながら気が付く）。すみません

Answer 1

属性セレクタ

input[readonly] {
   background-color: #FFFFDF;
   color: #0000FF;
}

[readonly] は疑似クラスではなく、属性セレクタです。
疑似クラスとは、:read-only を指します。
https://triple-underscore.github.io/selectors4-ja.html#rw-pseudos
https://caniuse.com/#feat=css-read-only-write

JavaScriptでトグル処理

read-onlyなしにした時、背景色が元に戻ってくれるのなら（デフォルトの背景 色#EEFFFF）、今回のようなことは必要ありません。戻る筈なのかな．．．？？？

JavaScriptでreadonly属性を削除/追加をトグルしているのなら、属性セレクタの適用条件もトグル出来ます。
(readonlyはreadonly content attributeに反映することになっているので、プロパティ操作でも結果は変わらないと思いますが、未検証)

https://html.spec.whatwg.org/multipage/input.html#dom-input-required

The readOnly IDL attribute must reflect the readonly content attribute.

Re: saya24さん

Comments

[saya24]

ご見解ありがとうございます。外部ファイルのCSSであったとしても、サーバからページが読み込まれたときにだけ作用するわけじゃない、ということですね？JQueryではpropでreadonlyを制御していたのですがattrで制御するようにしても、背景色が#EEFFFFに戻ってくれないです。
ブラウザの開発ツールの使い勝手がよく分からなくなってきました。
IEですがDomexplorerは現況画面に表示されている状況をリアルに反映してくれるのですよね？？
スタイルの部分ですが、画面の当該要素の背景色と開発ツールで表示されている現況採用されているだろうスタイルの定義が異なっている．．．．この絵を貼り付けたいのですが（もう一度本文への貼り付けをチャレンジしてみます）

[saya24]

IEの開発ツールのDOMExplorerについて、初めて気が付いたことがあります。
これを表示しっぱなしのまま、ブラウザ上でJSを動作させることで瞬時開発ツール上の内容（スタイルの部分しか見ていないですが）もすいすい変わると思ったら、大間違い。ノードを再度展開するなどして再度当該要素のタグに焦点を充てなおさないと、最新の定義を表示しないようです。
これを知らないで検証していたので　だいぶ混乱しました。

Answer 2

少なくともinput[type='text']:not([readonly])では。

input[type='text']:not([readonly]) {
  background: red;
}
```**動くサンプル：**[https://jsfiddle.net/57wpbqh1/](https://jsfiddle.net/57wpbqh1/)

---

【:not() | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/:not#CSS](https://developer.mozilla.org/ja/docs/Web/CSS/:not#CSS)

Comments

[saya24]

そうでした、できました。
ただ今、azuapricot さんの見解を参考に、この定義が本質的に必要なのか再確認するところ。
お騒がせしてすみません

Answer 3

デフォルトがreadonlyのcssを反映というのはどうかと思いますが

<style>
input[type=text]:not([readonly]){
  background-color: #EEFFFF;
  color: #0000FF;
}

input[type=text] {
  background-color: #FFFFDF;
  color: #0000FF;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.btn'),function(x){
    x.addEventListener('click',function(e){
      var prev=e.target.previousElementSibling;
      prev.readOnly=!prev.readOnly;
    });
  });
});
</script>

<input type="text" value="123"><input type="button" value="change" class="btn"><br>
<input type="text" value="456" readonly><input type="button" value="change" class="btn">

Comments

[saya24]

ご提示の記述でできました、ありがとうございます。