replace default submit button with image not working

Question

I am trying to replace my submit button with an image using background-image in CSS, this however is giving it a background image but the default submit button is still in the foreground with the text over it. I have also tried adding an image in my HTML but it doesn't show image, I'm guessing because the type is still submit. Is there a way to do this without changing it to type=image? surely there is as I have seen it work on other examples but its just not working for some reason on mine :/

Here is my code: http://jsfiddle.net/e94yh/

HTML

 <input type="submit" id="submit" value="Submit" src="../assets/images/submit.png"/>
</form>

CSS

 input[type=submit]{
cursor: pointer;
 }

 #submit {
width:100px;
height:auto;
 }

Answer 1

use background:url(''); and color:transparent;

CSS

input[type=submit]{
background:url('../assets/images/submit.png');
cursor: pointer;

color:transparent; }

instead of src=""

FIDDLE DEMO

Answer 2

Demo

I guess you need to use type="image" in order to achieve what you want.

An input button with an image :

<input type="image" src="../assets/images/submit.png" value="submit" id="submit">

Using CSS in order to style button

<input type="submit" class="myButton" value="submit" id="submit">

.myButton {
    background:url(../assets/images/submit.png) no-repeat;
    cursor:pointer;
    width: 100px;
    height:auto;
}

Answer 3

I realized that if I change the value to "" it removes the submit text.