CODEWITHSUNDEEP
csshtmlsafari
Christophvh
Christophvh

Reputation: 13254

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

Upvotes: 1

Views: 1712

Answers (2)

Christophvh
Christophvh

Reputation: 13254

Removing the padding from the input object was the solution.

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

Upvotes: 3

QRzing
QRzing

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

Related Questions