Html 如何为特定输入类型文本添加 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10589304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add css for specific input type text
提问by sulaiman
When I was trying to add some input fields with css
当我尝试用 css 添加一些输入字段时
I got a problem
我有问题
I couldn't make more than one css for some input fields
我不能为某些输入字段制作多个 css
this is the fields I have
这是我拥有的领域
<input type="text" name="firstName" />
<input type="text" name="lastName" />
and the css is
和CSS是
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
我想用这个 css 创建第一个字段 (firstName)
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
和第二个 (lastName) 与这个 css
input
{
background-image:url('images/fieldBG2222.gif');
background-repeat:repeat-x;
border: 0px solid;
height:25px;
width:125px;
}
help please :-)
请帮忙 ：-）
采纳答案by Chris Cudmore
Use the ID selector.
使用 ID 选择器。
CSS:
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:
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.
您的所有输入都将使用通用输入样式进行样式设置，两个特殊输入样式将具有 ID 选择器指定的样式。
回答by Andrew
You can style by type or name the form elements using CSS.
您可以使用 CSS 按类型设置样式或命名表单元素。
input[type=text] {
//styling
}
input[name=html_name] {
//styling
}
回答by Ashu
You have to change your HTML file:
你必须改变你的 HTML 文件：
<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:
并将您的 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');
}
Best of Luck!
祝你好运！
回答by miniMacGuru
Add an 'id' tag to each of your inputs:
为每个输入添加一个“id”标签：
<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.
然后你可以使用 CSS 中的 #selector 来抓取每一个。
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;
}
回答by DeathRs
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>
