Is it possible, via CSS to remove or change the src reference in the markup below?
The easy thing to do would be to change the markup, however, this code is in the wild and I need to deal with it as it is, so I'm trying to remove the image and use a background image instead.
<input type="image" src="wp-content/uploads/image.png" name="submit" class="submit" value="Submit" />
You can experiment with setting height and width to 0, add a padding and set the background image. You will have to make it display: block or display: inline-block for the height to take effect.
Here's an example - http://jsfiddle.net/zBgHd/1/
Actually, I just figured it out.
.submit {width:0;height:28px;background:url(go.png) no-repeat; padding-left:28px;}
My replacement image is 28x28. By specifying a left padding equal to that, and a width of zero, it effectively pushes the image off the viewable area of the box, leaving the background image to show.
Although that is specifically about the img src attribute, it still holds true for input src. This question pretty much answers it for you - How to change an input button image using CSS? Another related question: Define an <img>'s src attribute in CSS
No, to answer your question. Not in any version of any browser (AFAIK).
Any solution will involve a workaround. I'm testing out one right now, where you use a :before rule to create a background image on top of it.
Update... Well, for what it's worth, :before is not respected on input elements, whereas @Chetan's fiddle does work when I change the img tag to input. So, kudos.
