占位符在Safari中切片

Question

我无法在Safari中制作漂亮的占位符。这是它的样子。

Codepen：https://codepen.io/anon/pen/RLWrrK

＆＃13;

＆＃13;

.form-control {
  height: 45px;
  padding: 15px;
  font-size: 16px;
  color: #8c8c8c;
  background-color: #f5f5f5;
  border: 1px solid #d1d1d1;
  box-shadow: none;
  font-weight: 300;
}

.form-control:focus {
  box-shadow: none;
  color: #793a93;
  border-color: #793a93;
}

.form-control::-moz-placeholder {
  color: #8c8c8c;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #8c8c8c;
}

.form-control::-webkit-input-placeholder {
  color: #8c8c8c;
}

.form-control:focus::-moz-placeholder {
  color: #793a93;
  opacity: 1;
}

.form-control:focus:-ms-input-placeholder {
  color: #793a93;
}

.form-control:focus::-webkit-input-placeholder {
  color: #793a93;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-6 col-xs-12 contact-form">
  <form>
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="First Name">
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Last Name">
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="tel" class="form-control" placeholder="Phone Number">
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email Address">
        </div>
      </div>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看看这个：Why does Safari & Firefox cut off bottom of input text?

只需删除.form-control

上的填充

Answer 2

只需摆脱.form-control

上的填充

Answer 3

请试试这个代码，它对我有用

input::placeholder {
    overflow: visible;
}