输入框上的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8101996/
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
CSS on input boxes
提问by Geo Man
I have an issue on styling different form fields with CSS
我在使用 CSS 设置不同表单字段的样式时遇到问题
I have a CSS code:
我有一个 CSS 代码：
#form input {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
Now this code styles all three of the Input fields I have (below) but also styles the image submit button I have
现在这段代码设置了我拥有的所有三个输入字段的样式（如下），而且还设置了我拥有的图像提交按钮的样式
<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">
So then I change the CSS and create:
然后我更改 CSS 并创建：
#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)
This prevents the CSS styling of the image submit button but now it is not styling the password field - so I tried:
这可以防止图像提交按钮的 CSS 样式，但现在它没有设置密码字段的样式 - 所以我试过：
#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.password {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)
But this had no affect.
但这没有影响。
So the question is, how can I effectively allow the CSS styling on the input text and input password fields - but not to style the image submit button?
所以问题是，我怎样才能有效地允许输入文本和输入密码字段上的 CSS 样式 - 但不设置图像提交按钮的样式？
Thanks in advance!
提前致谢！
回答by Nicolás Ozimica
What you need to research is css selectors: CSS selector for text input fields?.
您需要研究的是css selectors：文本输入字段的 CSS 选择器？.
#form input[type="text"] {
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;width: 200px;
}
#form input[type="password"] {
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;
width: 200px;
}
#form input[type="button"] {
border: 0px;
}
回答by Niels
There is an option you can add
您可以添加一个选项
For your text fields
对于您的文本字段
#form input[type=text] {}
For your password fields
对于您的密码字段
#form input[type=password] {}
For your button fields
对于您的按钮字段
#form input[type=button] {}
Or just add a class to your password field, which is password.
或者只是在您的密码字段中添加一个类，即密码。
回答by Niels
You didn't put a class on your inputs? .passwords means class="password" in your html
你没有在你的输入上放一个类？.passwords 在您的 html 中表示 class="password"
回答by Jason Gennaro
You could do this
你可以这样做
Do not style the inputelement on its own, but instead target only those elements you want.
不要input单独设置元素的样式，而应仅针对您想要的那些元素。
First, get rid of this css
首先，摆脱这个css
#form input {/* styles here*/}
Then do this
然后做这个
#form input.text, #form input#password{
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;
width: 200px;
}
The comma separates the two elements but applies the css to each.
逗号分隔两个元素，但将 css 应用于每个元素。
Then you don't need to "reset" the border on the image submit button.
然后您不需要“重置”图像提交按钮上的边框。
By the way, your password inputhas an idaccording to your code and not a class, so you need the #instead of the ..
顺便说一句，您的密码根据您的代码input有一个id，而不是一个class，所以您需要#代替.。
回答by procma
FORM "inputs" in CSS:
CSS中的表单“输入”：
Text input:
文字输入：
input[type="text"] {...} /* normal (one row) text input */
textarea {...} /* multiline text input */
input[type="password"] {...} /* password masked input */
Button:
按钮：
input[type="button"] {...}
input[type="submit"] {...} /* type of button - submitting the form */
input[type="reset"] {...} /* clean (reset) whole form "inputs" */
Checkbox:
复选框：
input[type="checkbox"] {...}
Radiogroup:
无线电组：
input[type="radio"] {...}
Dropdown list:
下拉列表：
select {...}
select optgroup{...} /* group od values in dropdown list */
select option{...} /* value to choose in dropdown list */
回答by v.orujov
just remove second line on your css and add "text" class to your password type input. CORRECT VERSION BELOW:
只需删除 css 上的第二行并将“text”类添加到您的密码类型输入中。正确版本如下：
CSS:
CSS：
#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)
HTML:
HTML：
<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">
回答by Bojangles
Use the type of the input as part of your selector:
使用输入类型作为选择器的一部分：
#form input[type="text"] {
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;
width: 200px;
}
This is the attribute selector.
这是属性选择器。
You could always just add a class for your input boxes:
你总是可以为你的输入框添加一个类：
<input type="text" class="styled" name="email" id="email">
<input type="password" value="" class="styled" name="password" id="password">
With:
和：
#form input.styled {
border: 1px solid #FFFFFF;
font-size: 16px;
padding: 5px;
width: 200px;
}
回答by Doozer Blake
You're missing the .password and .button classes on your html.
您在 html 上缺少 .password 和 .button 类。
<input type="text" class="text" name="email" id="email">
<input type="password" class="password" value="" name="password" id="password">
<input name="button" class="button" type="image" src="go.jpg" alt="Submit" align="right">
