How to add css for specific input type text

2019-04-05 12:50发布

站内问答 / HTML/CSS
1940 5 4

When I was trying to add some input fields with css

I got a problem

I couldn't make more than one css for some input fields

this is the fields I have

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

and the css is

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

I want to make the first field (firstName) with this css

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

and the second one (lastName) with this css

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

help please :-)

5条回答
等我变得足够好
2楼-- · 2019-04-05 13:06

Use Classes to style. they are a better solution. using classes you can style each input type individually.

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

    <body>
        <input class="classnamehere" type="text" name="firstName" />
    </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
3楼-- · 2019-04-05 13:12

Add an 'id' tag to each of your inputs:

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

then you can use the #selector in CSS to grab each one.

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;
}
查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
4楼-- · 2019-04-05 13:27

You have to change your HTML file:

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

...to:

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

And modify your CSS file to:

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

Best of Luck!

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
5楼-- · 2019-04-05 13:29

Use the ID selector.

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

All your inputs will be styled with the generic input style, and the two special ones will have the styling specified by the ID selector.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
6楼-- · 2019-04-05 13:31

You can style by type or name the form elements using CSS. 

input[type=text] {
    //styling
}
input[name=html_name] {
    //styling
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)