I'm having trouble creating attractive placeholders in Safari. This is how it currently appears.
Codepen: https://codepen.io/anon/pen/RLWrrK
https://i.sstatic.net/aChBs.png
.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>