Html input type "email" and input type "number" different style other than input type "text"

Question

I request a help to fix a style issue in the below form . (im not a programmer, just trying stuff)

This is the code

<form action="success.php" method="post" >
<input type="text" name="Name" placeholder="Your name..." required /><br />
<input type="number" name="Phone" placeholder="Phone Number" required title="Valid phone number (Without + marks)"/><br />
<input type="email" name="Email" placeholder="Email Address" required title="Valid Email Format:example@example.com" /><br />
<textarea name="Message" placeholder="Your Message" required /></textarea><br /><br />
<input type="submit" value="Send my Quote Request" id="submit_footer" /><br />
</form>

and this is output..

which has a different formatting for input type="number" and input type="email". (

<input type="number" name="Phone" placeholder="Phone Number" required title="Valid phone number (Without + marks)"/><br />
<input type="email" name="Email" placeholder="Email Address" required title="Valid Email Format:example@example.com" /><br />

)

Input type="text" is the ok format/style. (<input type="text" name="Name" placeholder="Your name..." required /><br />)

I wish to have same formatting which is used for for both in put type "email" and "number".

Could not figure out even with google. Any help would be appreciated.

KR

PS

Style sheet footer

/*--------------------------------------------------footer--------------------------------*/
.footer
{

    background:#00234d;
    padding:50px 0px;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
}
.footer h3
{
    color:#FFFFFF;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
}
.footer input[type='text']
{
    width:251px;
    height:33px;
    padding-left:15px;
    border:2px solid #919191;
    outline:0px;
    color:#919191;
    margin-bottom:15px;
    background:transparent;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
}
.footer textarea
{
    width:251px;
    padding-top:10px;
    padding-left:15px;
    background:transparent;
    height:85px;
    padding-bottom:15px;
    border:2px solid #919191;
    outline:0px;
    color:#919191;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
    font-size:14px;

}
#submit_footer {
  color: #00aceb;
  font-size: 14px;
  outline:0;
  font-weight: 800;
  text-transform: uppercase;
  background:transparent;
  width:270px;
  text-decoration: none;
  padding: 5px 10px;
  border: 3px solid #00aceb;
  transition: all .5s !important;
  cursor:pointer;
  -webkit-transition: all .5s !important;
  -o-transition: all .5s !important;
  -ms-transition: all .5s !important;
  -moz-transition: all .5s !important;
  background: linear-gradient(to left, transparent 50%, #009ad6 50%);
    background-size: 200% 100%;
    background-position:right bottom;
}
#submit_footer:hover
{
     background-position:left bottom;
     color:#FFF;
}
.w_float
{
    float:left;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
      margin-top: 90px;
}
.w_float p
{
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
    color:#c3c7c8;
}
.w_float ul
{
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
    margin:0;
    padding:0px;
}
.w_float ul li
{
    list-style:none;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
    background:url(../images/true_arrow.png) no-repeat left 5px;
    color:#c3c7c8;
    font-size:14px;
    padding:0px 30px;
    margin-bottom:15px;
}
.s li
{
    background:url(../images/privacy_safe.png) no-repeat left 5px !important;
      padding: 0px 40px !important;
      transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
}
.w_float2 ul
{
    margin:0;
    padding:0px;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
}
.w_float2 ul li
{
    list-style:none;

    background-image:url(../images/footer_ul.png);
    background-repeat:no-repeat;
    color:#FFFFFF;
    font-size:18px;
    padding:0px 30px;
    margin-bottom:15px;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
    font-weight:600;
}
.w_float2 ul li:nth-child(2)
{
    background-position:0px -51px;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
}
.w_float2 ul li a
{

    color:#FFFFFF;
    font-size:18px;
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
    font-weight:600;
} 

Answer 1

Because you have applied css only on .footer input[type='text']...you will need to provide the same css to input[type='number'] and input[type='email'] like

.footer input[type='text'],
.footer input[type='email'],
.footer input[type='number'] {
  width: 251px;
  height: 33px;
  padding-left: 15px;
  border: 2px solid #919191;
  outline: 0px;
  color: #919191;
  margin-bottom: 15px;
  background: transparent;
  transition: all .5s !important;
  -webkit-transition: all .5s !important;
  -o-transition: all .5s !important;
  -ms-transition: all .5s !important;
  -moz-transition: all .5s !important;
}

...or another solution will be, which I recommend, use same class in all the input types, lets say input-control like

HTML

<input class="input-control" type="text" name="Name" placeholder="Your Name" required/><br />
<input class="input-control" type="number" name="Phone" placeholder="Phone Number" required title="Valid phone number (Without + marks)"/><br />
<input class="input-control" type="email" name="Email" placeholder="Email Address" required title="Valid Email Format:example@example.com" /><br />

CSS

.footer .input-control {
  width: 251px;
  height: 33px;
  padding-left: 15px;
  border: 2px solid #919191;
  outline: 0px;
  color: #919191;
  margin-bottom: 15px;
  background: transparent;
  transition: all .5s !important;
  -webkit-transition: all .5s !important;
  -o-transition: all .5s !important;
  -ms-transition: all .5s !important;
  -moz-transition: all .5s !important;
}