wake-up-neo.com

So fügen Sie CSS für einen bestimmten Eingabetyp hinzu

Als ich versuchte, einige Eingabefelder mit css hinzuzufügen

Ich habe ein Problem

Ich konnte für einige Eingabefelder nicht mehr als eine CSS erstellen

das sind die Felder, die ich habe

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

und die css ist

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

Ich möchte das erste Feld (Vorname) mit dieser CSS erstellen

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

und der zweite (lastName) mit dieser css

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

hilfe bitte :-)

htmlcssinputfield
10
sulaiman

Verwenden Sie den ID-Wähler.

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

Alle Ihre Eingaben werden mit dem generischen Eingabestil gestaltet, und die beiden speziellen haben den von der ID-Auswahl festgelegten Stil.

6
Chris Cudmore

Sie können die Formularelemente mit CSS formatieren oder benennen. 

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

Sie müssen Ihre HTML-Datei ändern:

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

...zu:

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

Und ändern Sie Ihre CSS-Datei wie folgt:

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

Viel Glück!

5
Ashu

Fügen Sie jeder Ihrer Eingaben ein 'id'-Tag hinzu:

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

dann können Sie den #selector in CSS verwenden, um jeden zu packen.

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

Verwenden Sie Klassen zum Gestalten. Sie sind eine bessere Lösung. Mit Klassen können Sie jeden Eingabetyp individuell gestalten.

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

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