Question

我在使用CSS

设置不同表单字段的样式时遇到问题

我有一个CSS代码：

#form input {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}

现在这段代码对我拥有的所有三个输入字段（下面）进行了样式设置，还设置了我有的图像提交按钮的样式

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

然后我改变CSS并创建：

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

这样可以防止图像提交按钮的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)

但这没有任何影响。

所以问题是，如何有效地允许输入文本和输入密码字段的CSS样式 - 但不是为图像提交按钮设置样式？

提前致谢！

Answer 1

您需要研究的是css selectors：CSS selector for text input fields?。

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

Answer 2

您可以添加一个选项

对于您的文字字段

#form input[type=text] {}

对于您的密码字段

#form input[type=password] {}

对于您的按钮字段

#form input[type=button] {}

或者只是在密码字段中添加一个类，即密码。

Answer 3

使用输入的类型作为选择器的一部分：

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

这是attribute selector。

您可以随时为输入框添加一个类：

<input type="text" class="styled" name="email" id="email">
<input type="password" value="" class="styled" name="password" id="password">

使用：

#form input.styled {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

Answer 4

你错过了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">

Answer 5

你没有在课程上输入课程？ .passwords在你的html中表示class =“password”

Answer 6

你可以这样做

不要单独设置input元素的样式，而是仅针对您想要的那些元素。

首先，摆脱这个css

#form input {/* styles here*/}

然后这样做

#form input.text, #form input#password{
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

逗号分隔两个元素，但将css应用于每个元素。

然后您无需在图像提交按钮上“重置”边框。

顺便说一句，根据您的代码而不是input，您的密码id有一个class，因此您需要#代替. }。

Answer 7

CSS中的

FORM“输入”：

文字输入：

input[type="text"] {...} /* normal (one row) text input */
textarea {...} /* multiline text input */
input[type="password"] {...} /* password masked input */

按钮：

input[type="button"] {...}
input[type="submit"] {...} /* type of button - submitting the form */
input[type="reset"] {...} /* clean (reset) whole form "inputs" */

复选框：

input[type="checkbox"] {...}

radioGroup中：

input[type="radio"] {...}

下拉列表：

select {...}
select optgroup{...} /* group od values in dropdown list */
select option{...} /* value to choose in dropdown list */

Answer 8

只需在你的CSS上删除第二行并添加＆＃34; text＆＃34;类到您的密码类型输入。正确版本如下：

CSS：

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

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

输入框上的CSS

8 个答案: