用firefox输入表单输入字段的问题

你知道为什么我的表单的输入字段在firefox上不能很好地呈现吗？（safari没有问题）。用firefox输入表单输入字段的问题

问题是（1）占位符文本在firefox中不可见（消息字段除外），（2）当您在这些字段（名称，电子邮件等）中输入某些内容时，它不可见。感谢您的帮助

<section> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-3 bordering"> 
     <h2>Nous <b>contacter</b></h2> 
     <h3>A votre service</h3> 
     </div> 

     <div class="col-md-8 right-content"> 
     <p>Toute l'équipe...</p> 

     <div class="grid-item contact-form"> 
      <div class="inner"> 
      <form id="form" action="/php/mail.php" name="form"> 
       <div class="row"> 
       <div class="col-md-6"> 
        <input placeholder="* Your name" name="name" required type="text" class="form-control"> 
       </div> 
       <div class="col-md-6"> 
        <input placeholder="* E-mail" name="email" required type="email" class="form-control"> 
       </div> 
       <div class="col-md-6"> 
        <input placeholder="Phone number" name="phone" type="text" class="form-control"> 
       </div> 
       <div class="col-md-6"> 
        <input placeholder="Website" name="website" type="text" class="form-control"> 
       </div> 
       <div class="col-md-12"> 
        <textarea placeholder="* Message" name="message" required class="form-control"></textarea> 
        <button id="send" type="submit" class="btn btn-default">Send</button> 
       </div> 
       </div> 
      </form> 
      </div> 
     </div> 
     </div> 

    </div> 
    </div> 
</section>

来源

2016-03-26 Greg

检查：https://jsfiddle.net/qr0nvov9/5/

将其替换为旧的css：

.form-control, 
.input-group-addon, 
input[type=number] { 
    background: #CEF6DC; 
    border: 0; 
    border-bottom: 1px solid #2e2e2e; 
    border-radius: 0; 
    box-shadow: none; 
    padding: 0px 10px; 
    font-weight: 400; 
    margin-top: 10px; 
    color: #2e2e2e; 
    -webkit-transition: all .3s; 
    transition: all .3s; 
    height:50px; 
} 

input:active, 
input:focus, 
textarea:active, 
textarea:focus { 
    outline: none!important; 
    box-shadow: none!important; 
    border-color: #2e2e2e!important; 
    /* background: #2e2e2e; */ 
    padding: 0px 21px; 
    color: #2e2e2e!important 
}

来源

2016-03-26 18:58:02

添加您的样式这个下游

form-control, .input-group-addon, input[type="number"] { 
 
    
 
    padding: 10px; /*just roughed this in*/ 
 
    box-sizing: content-box; 
 
}

来源

2016-03-26 18:53:36

用firefox输入表单输入字段的问题

回答

相关问题