Php 样式仅应用于某些表单字段类型

我的CSS样式适用于

手机

和

提交

输入类型，但不适用于

文本

和

电子邮件

类型：-

#page_2_form input {
    background-color: green;
    width: 600px;
}

因此，为了纠正它，我创建了另一条规则：-

#page_2_form input[type=text], input[type=email] {
    background-color: yellow;
    width: 600px;
}

但还是不行。以下是在PHP中重复出现的HTML：-

echo '<form action="/offer/details/results/" method="POST" id="page_2_form">';
echo '<h4>Who should we send this quote to?</h4><br>';
echo '<input type="hidden" name="amount" value="' . $_POST["amount"] . '" />';
echo '<input type="hidden" name="tenure" value="' . $_POST["tenure"] . '" />';
echo '<input type="text" name="username" placeholder="Name*"><br>';
echo '<input type="email" name="email" placeholder="Email*"><br>';
echo '<input type="phone" name="phone" placeholder="Phone*"><br>';
echo '<input type="submit" value="Get My Monthly Repayments">';
echo '</form>';

echo'；
echo“我们应该将此报价发送给谁？”；
回声'；
回声'；
回声“
”；
回声“
”；
回声“
”；
回声'；
回声'；

这是表格

---

请注意，这是在Wordpress中，我通过自定义CSS将CSS放在自定义部分。

确保指定的类型规则位于第一个*输入规则之后。如果不起作用，您可以添加！规则之后的重要事项：

#page_2_form input[type=text], input[type=email] {
    background-color: yellow !important;
    width: 600px;
}

---

但是，你应该避免使用！重要，除非绝对必要。

因此我删除了PHP回音以隔离HTML代码

现在，它似乎已使名称和电子邮件字段（文本和电子邮件）的颜色正确。我希望这有帮助

#第2页\u表单输入{
背景颜色：绿色；
宽度：600px；
}
#第2页表单输入[类型=文本]{
背景颜色：黄色；
宽度：600px；
}
#第2页表单输入[类型=电子邮件]{
背景颜色：黄色；
宽度：600px；
}

我们应该将此报价发送给谁？

试试这个

#phone{
        color: red !important;
      }
input[type='text']::-webkit-input-placeholder{
        color: red;
      }

只要修改它

Form 
<form action="/offer/details/results/" method="POST" id="page_2_form">
 <h4>Who should we send this quote to?</h4><br>
 <input type="hidden" name="amount" value="amount" />
 <input type="hidden" name="tenure" value="tenure" /> 
 <input type="text" name="username" placeholder="Name*"><br>
 <input type="email" name="email" placeholder="Email*"><br>
 <input type="phone" name="phone" id="phone" placeholder="Phone*"><br>
 <input type="submit" id="submit" value="Get My Monthly Repayments">
 </form>

---

参见此处

您应该将

填充

和

宽度

放在一起，如下所示：

#页面表单输入，#页面表单输入[类型=文本]，#页面表单输入[类型=电子邮件]{
宽度：600px！重要；
填充物：7em.5em；
}
#第2页表格输入{
背景颜色：绿色；
}
#第2页表单输入[类型=文本]
{
背景颜色：黄色；
}
#第2页表单输入[类型=电子邮件]
{
背景颜色：黄色；
}
我们应该避免重复诸如“宽度”之类的内容。`

我们应该将此报价发送给谁？

关于宽度： 除去

从style.css，217行

input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] {
    max-width: 24.3em;
    width: 100%;
}

或者（更好）为您的客户设置一个新的

#page_2_form input {
   max-width: 600px;
}

---

好的，所以我试着用

minwidth

替换

width

，结果成功了。感谢大家的帮助。

在将css应用于输入字段后，单击前端的

ctrl+F5

，它将删除页面缓存并重新加载。希望它能帮助你那些没有帮助的。另外，我已经在firefox中以私有模式查看了它：）它使用了

背景颜色

，但不使用

宽度

。您可以添加！宽度之后也很重要，但是最好弄清楚为什么指定类型的规则没有覆盖全局。是的，我添加了

！重要的

对两者都很重要，它只在背景色下工作。是的，这是一个难题。@Grey lover他们都是600px当我这样做时，

文本

和

电子邮件

字段的宽度仍然比其他两个字段小。不，恐怕不行。顺便说一句，电话不是一个id。只需在你的字段中添加一些id或类，这样你就可以分配它，无论你是否可以添加颜色。。您还可以将特定颜色添加到您选择的占位符中。如您所见。如果使用输入[type=“text”]或输入[type=“email”]，则表示所有具有文本和电子邮件类型的内容。假设您有50个文本字段，您只需要20个具有不同颜色的文本字段。你认为会发生什么。。

input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] {
    max-width: 24.3em;
    width: 100%;
}

#page_2_form input {
   max-width: 600px;
}