CODEWITHSUNDEEP
phpwordpresshtmlcss
Grey-lover
Grey-lover

Reputation: 633

Styles only applying to some of the form field types

My CSS styles are applying to phone and submit input types, but not to text and email types:-

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

So to rectify it, I created another rule:-

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

But it still won't work. Here is the HTML echoed in PHP:-

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

Here is the form live.

Please note that this is in Wordpress and I put the CSS via Custom CSS in Customize section.

Upvotes: 1

Views: 105

Answers (7)

Grey-lover
Grey-lover

Reputation: 633

Okay so I tried replacing width with min-width and it worked. Thanks everyone for their help though.

Upvotes: 0

UpLinK
UpLinK

Reputation: 89

About width: remove 

max-width: 24.3em;

from style.css, 217 line

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

Or (better) set new one for your 

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

Upvotes: 0

Gufran Hasan
Gufran Hasan

Reputation: 9373

You should put padding and width in together as:

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

Upvotes: 0

Statik Stasis
Statik Stasis

Reputation: 308

So I removed the PHP echos to isolate the HTML code.

It appears to have made the name and email fields (text and email) the correct color now. I hope this helps.

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

Upvotes: 2

Vasco
Vasco

Reputation: 1

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

See Here https://jsfiddle.net/4ktgfv2t/

Upvotes: 0

Vasco
Vasco

Reputation: 1

try this 

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

Just modify it.

Upvotes: 0

Phillip Weber
Phillip Weber

Reputation: 564

Make sure that the type specified rules come after the first *input rule. If that does not work, you can add !important after the rule:

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

But, you should avoid using !important unless absolutely necessary.

Upvotes: 0

Related Questions