Christophvh Christophvh - 5 months ago 46
CSS Question

Password input field displays wrong on safari 9.1

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:

enter image description here

Safari

enter image description here

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;
}

Answer

Removing the padding from the input object was the solution.

input[type="password"] {
    padding: 12px;
}
Comments