Can you set the src of an input image using CSS?

Can you set the src of an input image using CSS?开发者_如何学Go

This has to work in IE.

---

No.

All you can do is define a background-image URL but that is different from a proper <img> in so many ways.

Why do you need this? Maybe there is a workaround.

---

Just use <input type="submit" class="foo"> instead of <input type="image" src="foo.png">.

E.g.

<input type="submit" name="save" value="" class="mybutton" />

with for example

.mybutton {
    border: 0;
    width: 40px;
    height: 20px;
    background-image: url('foo.png');
}

The <input type="image"> is meant to have sort of an image map as button. When submitted, it sends a name.x and name.y parameter to the server side which denotes the exact location where the client has pressed on the image map. This has likely not your interest here. You just want a submit button with a background image.

---

No, you can't do it without changing type of your input. But if you have to use image type input then there is a hack that I used before.

Set src of your input to a 1 by 1 pixel transparent PNG file and then use background-image to set the image via CSS.

---

What you're asking sounds like 'inline images'. It's not generally a preferred method, but apparently there are some practical uses for it if you are trying to avoid caching of that image.

I borrowed the below code from the following link to give you an example: http://www.websiteoptimization.com/speed/tweak/inline-images/

ul {list-style:none;}
ul > li {
margin:0 0 .1em;
background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/) 
top left no-repeat; )
height:14px;
text-indent:1.5em;
}
</style>