输入框上的CSS

我有一个关于用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.password {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

但这没有影响

所以问题是，我如何才能有效地允许在输入文本和输入密码字段上使用CSS样式，而不是设置图像提交按钮的样式

---

提前谢谢

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

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

这是最新的

您始终可以为输入框添加一个类：

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

---

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

---

您需要研究的是

css选择器

您可以添加一个选项

用于文本字段

#form input[type=text] {}

用于您的密码字段

#form input[type=password] {}

用于按钮字段

#form input[type=button] {}

或者只需在密码字段中添加一个类，即password。
您没有在输入中添加类。密码在html中的意思是class=“password”
您可以这样做

不要单独设置
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
，而不是
类，因此您需要
而不是CSS中的
表单“input”：

文本输入：

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"] {...}

放射组：

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

下拉列表：

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

只需删除css上的第二行，并将“text”类添加到密码类型输入中。正确版本如下：

CSS:

HTML:

事实上，CSS中有一个输入错误：输入类型按钮规则的最后一个字符是
）
，但必须是
}
。
input[type="checkbox"] {...}

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

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

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

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