skip to Main Content

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

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

Form with three rows of inputs. The placeholders in the inputs on the first row are cut off halfway vertically.

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

3

Answers


  1. Look at this: Why does Safari & Firefox cut off bottom of input text?

    Just remove the padding on .form-control

    Login or Signup to reply.
  2. Just get rid of padding on .form-control

    Login or Signup to reply.
  3. Please try this code, it worked for me

    input::placeholder {
        overflow: visible;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search