I have implemented a background image on the <input type="submit"> element to give it the appearance of a button. My CSS code looks like this:
input.button {
background-image:url(/path/to/image.png);
}
Furthermore, I would like to display a different image when the button is disabled. The following CSS rule should handle that scenario:
input.button[disabled] {
background-image:url(/path/to/disabled/image.png);
}
However, I encountered an issue in the iPhone browser where the disabled image appears above the normal image instead of replacing it. This is likely due to the ability of CSS3 to support multiple background images, causing Safari to overlay both. Interestingly, Firefox 4 behaves similarly when using background instead of background-image. Yet, with the current code setup, Firefox 4 displays it correctly.
My question then becomes: is there a method to swap out the existing background image in mobile Safari rather than just layering it on top?