Make Retina display ready for input submit button with image

When use input[type=image] for form submission, the image is stretched when use Retina Display mobile. Since you cannot change ‘src’ attribute using CSS, I had to find another way to accomplish this.

Someone said to use ‘content’ in CSS can do, but I failed. And this method is not browser compatible.

Anyway, you can make input image to use bigger size in Retina display using only CSS.

<div id="login">
<input type="submit"  id="login_button" name="login_button" class="login_button" value="Sign in" />
</div>

<style type="text/css">
#login .login_button{
	background : url(login_button.png) no-repeat center center ;
	background-size: 100%;
	border : none;
	color : transparent;
	width: 100px;
	height: 20px;
}

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi) {  
    /* Retina-specific stuff here */

    #login .btn-login{
   		background : url(login_button@2x.png) no-repeat center center;
   		background-size: 100%;
   }

}
</style>

Reference: http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/