html - 同じページに異なるスタイルの入力ボックス

Question

入力ボックスには次のスタイルがあります

     input[type="text"] { 
        height:16px ; 
        font-size:14 ;
        border-radius: 5px ;    
     }

私がやりたいのは、ほとんどの入力でこのスタイルを使用することですが、背景色などを追加できるように入力のクラスを作成したいと思います。スタイルシートでこれを行うにはどうすればよいですか？

Answer 1

クラスを使用する

異なるスタイルでクラスを定義する

 input[type="text"].different { 
    background-color:red;    
 }

それをhtmlの入力要素に適用します

<input type="text" class="different" />

---

この入力には、汎用ルールのすべてのプロパティが含まれ、クラスinput[type="text"]のすべてのプロパティが適用されます。input[type="text"].different

input[type="text"].differentがより重要であるため、プロパティが重複している場合は、クラス内のプロパティ.differentが優先されます。

---

https://developer.mozilla.org/en-US/docs/CSS/Class_selectorsおよびhttps://developer.mozilla.org/en-US/docs/CSS/Specificityをお読みください

Answer 2

input[type="text"].yellow {
    background-color: yellow;
}