Question

我需要为每个表单的文本输入设置不同的样式，但它仍然将文本css规则应用于两个表单。当前代码使它看起来像这样;

＆＃13;

.mail-form {
text-align: center;
width: 100%;
}

.apply-form {
text-align: left;
margin-left: 2vh;
}
input[type=text] {
width: 80%;
}
input[type="text"] {
padding: 1vh;
margin-left: 4vh;
}

＆＃13;

<form class= "mail-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form> 

<form class="apply-form">
<p>First Name:</p>
<input type="text" name="firstname">
</form>

＆＃13;

我需要邮件表格看起来像这样;

＆＃13;

.mail-form {
text-align: center;
width: 100%;
}

＆＃13;

<form class= "mail-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form>

＆＃13;

注意文本框保持这个大小，我需要申请表格看起来像这样;

＆＃13;

.apply-form {
text-align: left;
margin-left: 2vh;
}
input[type=text] {
width: 80%;
}
input[type="text"] {
padding: 1vh;
margin-left: 4vh;
}

＆＃13;

<form class="apply-form">
<p>First Name:</p>
<input type="text" name="firstname">

＆＃13;

如果没有影响邮件表单规则的申请表的规则，我怎么能拥有这些文本输入。

提前致谢。

Answer 1

您只需要在输入前添加适当的类

.mail-form {
  text-align: center;
  width: 100%;
}

.apply-form {
  text-align: left;
  margin-left: 2vh;
}

.apply-form input[type="text"] {
  padding: 1vh;
  margin-left: 4vh;
  width: 80%;
}

<form class="mail-form">
  <input type="text" name="email">
  <input type="submit" value="Submit">
</form>

<form class="apply-form">
  <p>First Name:</p>
  <input type="text" name="firstname">
</form>

如何在一个表单的文本输入上没有样式，而是为另一个表单设置输入样式？

1 个答案: