web-dev-qa-db-fra.com

Comment ajouter des CSS pour un type de texte spécifique

Quand j'essayais d'ajouter des champs de saisie avec css

J'ai un problème

Je ne pouvais pas faire plus d'un css pour certains champs

ce sont les champs que j'ai

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

et le css est

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

Je veux faire le premier champ (firstName) avec ce css

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

et le second (nom) avec ce css

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

aidez-moi, s'il vous plaît :-)

htmlcssinputfield
10
sulaiman

Utilisez le sélecteur d'identifiant.

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

Toutes vos entrées seront stylées avec le style d’entrée générique et les deux spéciales auront le style spécifié par le sélecteur ID.

6
Chris Cudmore

Vous pouvez styler par type ou nommer les éléments de formulaire à l'aide de CSS. 

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

Vous devez changer votre fichier 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" />

Et modifiez votre fichier CSS pour:

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

Bonne chance!

5
Ashu

Ajoutez une balise 'id' à chacune de vos entrées:

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

vous pouvez ensuite utiliser le sélecteur # en CSS pour les récupérer.

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

Utilisez les classes pour le style. ils sont une meilleure solution. en utilisant des classes, vous pouvez styliser chaque type d’entrée individuellement.

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

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