Вопрос по input, css, html, field – Как добавить CSS для определенного типа ввода текста

10

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

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

возможный дубликатWhat HTML/CSS would you use to create a text input with a background? ghoppe
@Musa - этот немного легче читать.net.tutsplus.com/tutorials/html-css-techniques/… Chris Cudmore
css selectors Musa

Ваш Ответ

5   ответов
0

вы можете стилизовать каждый тип ввода индивидуально.

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

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

.

input[type=text] {
    //styling
}
input[name=html_name] {
    //styling
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededinput[type="text]Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
3

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

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

Все ваши входные данные будут стилизованы с использованием общего стиля ввода, а два специальных будут иметь стиль, заданный селектором идентификатора.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
5

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

Удачи!

Похожие вопросы