Html输入类型＆＃34;电子邮件＆＃34;和输入类型＆＃34;数字＆＃34;输入类型以外的其他风格＆＃34; text＆＃34;

时间：2018-02-16 05:36:32

标签： html css validation styles stylesheet

我请求帮助以修复下面表单中的样式问题。 （我不是程序员，只是尝试一下）

这是代码

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

这是输出..

enter image description here

具有输入类型=＆＃34;数字＆＃34; 和输入类型=＆＃34;电子邮件＆＃34; 的不同格式。 （

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

）

输入类型=＆＃34;文字＆＃34; 是ok格式/样式。 （<input type="text" name="Name" placeholder="Your name..." required /><br />）

我希望在put类型和＃34;电子邮件＆＃34;中使用相同的格式。和＆＃34;数字＆＃34;。

即使用谷歌也无法弄明白。任何帮助将不胜感激。

KR

PS

样式表页脚 

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

3 个答案:

答案 0 :(得分：3)

因为您仅在.footer input[type='text']上应用了css ...您需要向input[type='number']和input[type='email']提供相同的css，例如

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

...或其他解决方案，我建议在所有输入类型中使用相同的类，让我们说input-control喜欢

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

答案 1 :(得分：3)

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

答案 2 :(得分：2)

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

在css中替换它

相关问题
最新问题