Question

我的CSS样式适用于phone和submit输入类型，但不适用于text和email类型： -

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

以下是live表单。

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

Answer 1

所以我删除了PHP回声以隔离HTML代码。

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

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

<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" placeholder="Phone*"><br>
<input type="submit" value="Get My Monthly Repayments">
</form>

Answer 2

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

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

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

Answer 3

试试这个

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

只需修改它。

Answer 4

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>

CSS：

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

#phone::-webkit-input-placeholder{
    color: white;
}
#phone::-moz-placeholder{
    color: white;
}


#submit {
background-color: yellow;
width: 600px;
color: blue;
}

见https://jsfiddle.net/4ktgfv2t/

Answer 5

您应该将padding和width放在一起作为：

#page_2_form input,#page_2_form input[type=text],#page_2_form input[type=email]{
 width: 600px !important;
 padding: .7em .5em;
}

#page_2_form input {
    background-color: green;
   
}
#page_2_form input[type=text]
 {
    background-color: yellow;
   
}
#page_2_form input[type=email]
 {
    background-color: yellow;
    
}

We should avoid repeating anything like `width.`

<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" placeholder="Phone*"><br>
<input type="submit" value="Get My Monthly Repayments">
</form>

Answer 6

关于宽度：删除

max-width: 24.3em;

来自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;
}

Answer 7

好的，所以我尝试用width替换min-width并且它有效。感谢大家的帮助。

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

7 个答案: