Override default font-size of password inputs in Chrome to match Firefox

Question

Chrome renders passwords smaller than Firefox. If I manually increase the font-size of a password input element in Chrome to match Firefox, then the caret height will be increased too, which I don't want. What's the workaround to this?

Answer 1

Here you go (using a media query to select Chrome... and Safari, which I don't have to check):

<input type="password" class="pass" value="dfjlfsdkljf"><br>
<input type="password" value="dfjlfsdkljf">​

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .pass {
        -webkit-text-stroke-width: .2em;
        letter-spacing: 0.2em;
    }
}​

http://jsfiddle.net/exbFb/3/

And a blanket selector, to affect a input[type=password] elements:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type=password] {
        -webkit-text-stroke-width: .2em;
        letter-spacing: 0.2em;
    }
}​

http://jsfiddle.net/exbFb/4/