web-dev-qa-db-ja.com

特定の入力タイプのテキストに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;
}

このCSSで最初のフィールド（firstName）を作りたい

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

このcssを持つ2番目（lastName）

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

助けてください ：-）

htmlcssinputfield
14
sulaiman

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" />

すべての入力は汎用入力スタイルでスタイル設定され、2つの特別な入力スタイルはIDセレクターで指定されたスタイル設定になります。

6
Chris Cudmore

CSSを使用して、タイプごとにスタイルを設定したり、フォーム要素に名前を付けたりできます。

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

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');
}

幸運を祈ります！

5
Ashu

各入力に「id」タグを追加します。

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

次に、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;
}
3
miniMacGuru

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

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

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