Как добавить CSS для текста типа ввода

Когда я пытался добавить некоторые поля ввода с помощью 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;
}

Я хочу создать первое поле (firstName) с помощью этого css

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

а второй (lastName) с этим css

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

помогите пожалуйста: -)

Ответ 1

Используйте селектор идентификаторов.

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

С помощью CSS можно стилизовать по типу или называть элементы формы.

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

Ответ 3

Вам нужно изменить свой 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');
}

Лучшее из удачи!

Ответ 4

Добавьте тег 'id' к каждому из ваших входов:

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

то вы можете использовать #selector в CSS для захвата каждого из них.

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

Ответ 5

Используйте классы для стиля. они являются лучшим решением. используя классы, вы можете индивидуально настраивать каждый тип ввода.

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

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