I have a login box, where I want the browser to remember the saved password if the user chose to do so, but when a password is actually saved, the form starts looking really ugly:
is there a way to override this behavior? In Firefox and IE it looks normal. In Chrome and Opera it looks really bad.
And yes, I do know "remmember" is misspelled :P
jquery based js solution, it is not ideal but works. Chrome change the style and than the js return it to your styles.
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
A possible workaround for the moment is to set a "strong" inside shadow:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
}
From the picture it looks like you are using images for the design of that input field. You should be able to use border-radius to get the effect you want without using images. Check out http://inspectelement.com/didyouknow/rounded-corners-on-input-fields-in-almost-all-modern-browsers/ for an example.
If you use border-radius, the yellow background that Chrome inserts (which is intended to indicate to the user that the form was prefilled), should fill the entire input field and be rounded.
For browsers that don't have border-radius, you can use the images. Since this problem is only in Chrome, and Chrome supports border-radius, it should work. Check out http://www.modernizr.com/ for help gracefully degrading depending on what HTML5/CSS3 features are available.
