Placeholders getting sliced in Safari-Twitter bootstrap

user8620049
September 16, 2017
206 views
2 votes
3 Answers

I can’t make nice looking placeholders in Safari. Here is what it looks like.

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>