占位符在 Safari 中被切片答案

【问题标题】：Placeholders getting sliced in Safari占位符在 Safari 中被切片
【发布时间】：2021-06-30 13:34:45
【问题描述】：

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

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

.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;
}

<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>

【问题讨论】：

欢迎来到 StackOverflow。请阅读stackoverflow.com/help/mcve，然后单击edit 编辑您的问题，以便我们提供帮助。具体来说，您需要在问题正文中包含所有相关信息，以便如果链接消失，问题仍然有效且有用。这对我们来说也变得更加容易，因此您更有可能获得所需的帮助！ 我们应该能够将您尝试的代码粘贴到文本文件中，以重现您的特定问题。一切顺利。

标签： html css twitter-bootstrap

【解决方案1】：

只需去掉 .form-control 上的填充

【讨论】：

【解决方案2】：

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

只需删除 .form-control 上的填充

【讨论】：

是的，如果我给例如 55px，它可以工作，但我想做得更像素完美

【解决方案3】：

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

input::placeholder {
    overflow: visible;
}

【讨论】：