Question

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

Answer 1

在风格的下游添加

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

Answer 2

请检查：

用旧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
}

使用firefox表单输入字段呈现问题

2 个答案: