用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輸入表單輸入字段的問題

回答

相關問題