我请求帮助解决以下表格中的样式问题。 (我不是程序员，只是尝试一些东西)
这是代码
<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>
这是输出..
input type="number" 和 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" 是正确的格式/样式。 ( <input type="text" name="Name" placeholder="Your name..." required /><br /> )
我希望具有用于输入类型“电子邮件”和“数字”的相同格式。
即使使用谷歌也无法弄清楚。任何帮助将不胜感激。
韩国
附言
样式表页脚
/*--------------------------------------------------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;
}
最佳答案
.footer input[type='email']
{
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 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;
}关于HTML 输入类型 "email"和输入类型 "number"除了输入类型 "text"之外的不同样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48820668/