Come aggiungere css per il tipo di testo di input specifico

Quando stavo cercando di aggiungere alcuni campi di input con i CSSCome aggiungere css per il tipo di testo di input specifico

Ho un problema

non ho potuto fare più di un css per alcuni campi di input

questo è i campi ho

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

ed il CSS è

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

Voglio fare il primo campo (firstName) con questo css

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

e la seconda (lastName) con questo css

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

aiuto per favore :-)

fonte

2012-05-14 sulaiman

[selettori CSS] (http://www.w3.org/TR/CSS2/selector.html) – Musa

possibile duplicato del [Che HTML/CSS vuoi utilizzare per creare un input di testo con uno sfondo? ] (http://stackoverflow.com/questions/526548/what-html-css-would-you-use-to-create-a-text-input-with-a-background) – ghoppe

@Musa - Questo è un po 'più facile da leggere. http: //net.tutsplus.com/tutorial/html-css-techniques/the-30-css-selectors-you-must-memorize/ –

Utilizzare il selettore 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" />

Tutti gli ingressi saranno in stile con lo stile di input generici, e le due speciali avrà lo stile specificato dal selettore di ID.

fonte

2012-05-14 18:57:32

È puoi stilare per tipo o nominare gli elementi del modulo usando CSS.

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

fonte

2012-05-14 18:54:17 Andrew

In questo caso html_name è firstName/lastName – Andrew

ma è necessario inserire virgolette attorno al valore (non è sicuro se funzioni senza). Mi piace 'input [type =" text] '- È così che l'ho sempre usato .. – Dion

@ DRP96 praticamente corretto, ho appena scritto una dichiarazione generica (le virgolette dovrebbero essere aggiunte implicitamente). – Andrew

Aggiungi un tag 'id' per ciascuno dei tuoi ingressi:

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

quindi è possibile utilizzare il #selector in CSS per afferrare ciascuno.

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

fonte

2012-05-14 18:55:19 miniMacGuru

È necessario modificare il file HTML:

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

... a:

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

e modificare il file 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'); 
}

buona fortuna!

fonte

2013-02-13 13:13:53 Ashu

Utilizzare le classi per lo stile. sono una soluzione migliore. utilizzando le classi è possibile definire singolarmente ciascun tipo di input.

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

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

fonte

2015-04-07 18:52:55 DeathRs

Come aggiungere css per il tipo di testo di input specifico

risposta

Problemi correlati