Jak dodać css dla specyficznego typu wejściowego tekstu

Kiedy starałem się dodać kilka pól wejściowych z cssJak dodać css dla specyficznego typu wejściowego tekstu

Mam problem

nie mogłem zrobić więcej niż jeden css dla niektórych pól wejściowych

to pola mam

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

i CSS jest

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

Chcę, aby pierwsze pole (imię) z tym css

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

a drugi (Nazwisko) z tym css

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

pomocy proszę :-)

Źródło

2012-05-14 sulaiman

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

możliwe duplikat [Co HTML/CSS należałoby użyć w celu utworzenia wprowadzania tekstu z tłem? ] (http://stackoverflow.com/questions/526548/what-html-css-would-you-use-to-create-a-text-input-with-a-background) – ghoppe

@Musa - ten jest nieco łatwiejsze do odczytania. http: //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ –

Użyj wybieraka 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" />

wszystkie Twoje wejść zostaną urządzone z ogólnym stylu wejściowego, a dwa z nich będą miały specjalne stylizacji określony przez selektor identyfikatora.

Źródło

2012-05-14 18:57:32

Ty można stylować według typu lub nazwy elementów formularza za pomocą CSS.

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

Źródło

2012-05-14 18:54:17 Andrew

W tym przypadku nazwa_html jest firstName/lastName – Andrew

, ale powinieneś umieścić cudzysłowy wokół wartości (nie wiesz, czy działa bez). Jak 'input [type =" text] '- Tak jak zawsze go użyłem .. – Dion

@ DRP96 praktycznie rację, właśnie napisałem ogólną instrukcję (cytaty powinny być domyślnie dodane). – Andrew

Dodaj znacznik 'id' do każdego z wejść:

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

następnie można użyć #selector w CSS chwycić każdy.

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

Źródło

2012-05-14 18:55:19 miniMacGuru

Musisz zmienić swój plik HTML:

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

... do:

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

i zmodyfikować swój plik 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'); 
}

powodzenia!

Źródło

2013-02-13 13:13:53 Ashu

Użyj klas do stylu. są lepszym rozwiązaniem. używając klas, możesz indywidualnie dopasować każdy typ wejścia.

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

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

Źródło

2015-04-07 18:52:55 DeathRs

Jak dodać css dla specyficznego typu wejściowego tekstu

Odpowiedz

Powiązane problemy