フォームのさまざまな要素にCSSプロパティを提供する方法は？

Question

私はHTMLページに2つのフォームを持っています。両方のフォームにはinput type="text"というプロパティが含まれています。

両方の入力タイプのテキストに異なるCSSを与えるにはどうすればよいですか？

私はこれを適用した場合：

input[type=text] { 
    //style 
} 

それはフォームの要素の両方のスタイルを変更します。

Answer 1

あなたは、それぞれの入力にそれ自身のIdまたはクラスセレクタを与え、それぞれのIdをスタイルすることができます。

<input id='input1'> </input> 
<input id='input2'> </input> 

<style> 
#input1 { 
-- insert styles here for input 1 
} 

#input2 { 
-- insert styles here for input 2 
} 
</style> 

また、インラインスタイル（クイックとダーティ）を作成して、望ましい結果を達成することもできます。

<input style="style1:theStyle;"> </input> 
<input style="style2:theStyle;"> </input> 

今後は、コードスニペットを共有してよりわかりやすい説明をお願いします。

Answer 2

これはこの入力[type = text]タグの周りにコンテナがあると思います。このコンテナを参照として使用して、両方の入力タグをポイントすることができます。

.form-container input[type=text]:nth-child(1){ 
 
border:2px dashed #000; 
 
} 
 
.form-container input[type=text]:nth-child(2){ 
 
border:2px dotted #000; 
 
}

<div class="form-container"> 
 
    <input type="text" > 
 
    <input type="text"> 
 
</div>

か、inputタグに 'ID' を置くことができます。

#form-one{border:1px dashed #000;} 
 
#form-two{border:1px dotted #000;}

<div class="form-container"> 
 
<input type="text" id="form-one" > 
 
<input type="text" id="form-two"> 
 
</div>