Reputation: 13254
Basic input fields of type Password display badly on safari 9.1
The problem is the 'Key' in safari. This is my html:
<div class="form-group">
<input type="password" class="form-control" placeholder="Wachtwoord *" name="password" required="">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Bevestig wachtwoord *" name="password_confirmation" required="">
</div>
Chrome:
Safari
Setting height:100%';
will fix the problem but this obviously changes the height of the field, which is not what i want.
Css:
input[type="text"], input[type="email"], input[type="password"] {
display: block;
width: 100%;
vertical-align: middle;
border: 1px solid #cbcbcb;
outline: 0;
box-shadow: none;
padding: 12px;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.form-control {
border: 1px solid #cbcbcb;
border-radius: 0;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
Upvotes: 1
Views: 1712
Reputation: 13254
Removing the padding from the input object was the solution.
input[type="password"] {
padding: 12px;
}
Upvotes: 3
Reputation: 11
I had exactly the same problem and searched high and low for a solution which in the end turned out to be as easy as: line-height: normal
;
This seems to work across browsers for me .. hope you get the same result!
Upvotes: 1