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>
3
Answers
Look at this: Why does Safari & Firefox cut off bottom of input text?
Just remove the padding on .form-control
Just get rid of padding on .form-control
Please try this code, it worked for me