Firefox 的表单输入字段渲染问题答案

【问题标题】：Form input fields rendering issue with firefoxFirefox 的表单输入字段渲染问题
【发布时间】：2016-07-14 08:19:03
【问题描述】：

您知道为什么我的表单的输入字段在 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>

【问题讨论】：

标签： html css firefox contact-form

【解决方案1】：

检查这个：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
}

【讨论】：

【解决方案2】：

将此添加到您的样式的下游

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

【讨论】：