特定の入力タイプのテキストのCSSを追加する方法

私は、私はいくつかの入力フィールドに複数のCSSを作ることができなかった問題

を得た

CSSでいくつかの入力フィールドを追加しようとしていた

これは私が

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

を持っている分野で、CSSが

input 
{ 
    background-image:url('images/fieldBG.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:235px; 
}

012です

は私が:-)このCSS

input 
{ 
    background-image:url('images/fieldBG2222.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
}

助けを借りて、このCSS

input 
{ 
    background-image:url('images/fieldBG.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:235px; 
}

2つ目（lastNameという）との最初のフィールド（firstNameの）を作るためにしてくださいしたい

出典

2012-05-14 sulaiman

[CSSセレクタ]（http://www.w3.org/TR/CSS2/selector.html）[どのようなHTML/CSSの – Musa

可能複製あなたがバックグラウンドでテキスト入力を作成するために使用するのでしょうか？ ]（http://stackoverflow.com/questions/526548/what-html-css-would-you-use-to-create-a-text-input-with-a-background） – ghoppe

@ムサ - これは読むのが少し楽です。 http：//net.tutsplus。/ –

IDセレクタを使用してください。

CSS：

input{ 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
} 

#firstname{ 
    background-image:url('images/fieldBG.gif'); 
} 
#lastname{ 
    background-image:url('images/fieldBG2222.gif'); 
}

はHTML：

<input type="text" ID="firstname" name="firstName" />  
<input type="text" ID="lastname" name="lastName" />

あなたのすべての入力は、汎用入力スタイルでスタイリングされ、二つの特別なものはIDセレクターで指定されたスタイリングを持っています。

出典

2012-05-14 18:57:32

ますCSSを使用してフォーム要素の型または名前を付けてスタイルを設定できます。

input[type=text] { 
    //styling 
} 
input[name=html_name] { 
    //styling 
}

出典

2012-05-14 18:54:17 Andrew

この場合、html_nameはfirstName/lastName – Andrew

ですが、値の前後に引用符を付ける必要があります。）。 'input [type =" text] 'のように - これは私がいつも使ってきた方法です。 – Dion

@ DRP96実際には、一般的なステートメント（暗黙的に引用符を追加する必要があります）を書きました。 – Andrew

ご入力のそれぞれに 'ID' のタグを追加：

<input type="text" id="firstName" name="firstName" /> 
<input type="text" id="lastName" name="lastName" />

、あなたが各1をつかむためにCSSで#selectorを使用することができます。

input { 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
} 

#firstName { 
    background-image:url('images/fieldBG.gif'); 
    width:235px; 
} 

#lastName { 
    background-image:url('images/fieldBG2222.gif'); 
    width:125px; 
}

出典

2012-05-14 18:55:19 miniMacGuru

あなたのHTMLファイルに変更する必要があります。

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

...へ：

<input type="text" id="FName" name="firstName" /> 
<input type="text" id="LName" name="lastName" />

そしてへのあなたのCSSファイルを変更します。最高の幸運

input { 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
} 


#FName { 
    background-image:url('images/fieldBG.gif'); 
} 


#LName { 
    background-image:url('images/fieldBG2222.gif'); 
}

を！

出典

2013-02-13 13:13:53 Ashu

スタイルを使用するには、クラスを使用します。彼らはより良い解決策です。クラスを使用して、各入力タイプを個別にスタイルすることができます。

<html> 
    <head> 
     <style> 
      .classnamehere { 
       //Styling; 
      } 
     </style> 
    </head> 

    <body> 
     <input class="classnamehere" type="text" name="firstName" /> 
    </body> 
</html>

出典

2015-04-07 18:52:55 DeathRs

特定の入力タイプのテキストのCSSを追加する方法

答えて

関連する問題