17

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

助けてください ：-）

4

5 に答える 5

87

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

input[type=text] {
    //styling
}
input[name=html_name] {
    //styling
}
于 2012-05-14T18:54:17.997 に答える
8

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 セレクターで指定されたスタイルになります。

于 2012-05-14T18:57:32.233 に答える
5

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-13T13:13:53.133 に答える
4

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

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

次に、CSSの#s​​electorを使用してそれぞれを取得できます。

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-14T18:55:19.850 に答える
1

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

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

    <body>
        <input class="classnamehere" type="text" name="firstName" />
    </body>
</html>
于 2015-04-07T18:52:55.293 に答える