How to remove odd border from value part of input element in Safari?

Question

If you have a look at this pic - http://twitpic.com/q0a6p - you can see a strange issue with an outline around the text element of a input tag in a form. (on the right, it is being inspected by Safari's web inspector). The background is the image of the button. The problem only occurs in Safari. FF and IE is fine. Does anyone have any idea what is causing it?

<input type='image'  id='product_114' class='buy_button' name='Buy' value='Add To Cart'  />

I've applied border:none !important to the input element but the outline still shows (only in Safari). It appears to be outlining the value part of the input element, but I'm not sure how to style that.

Answer 1

It's an input of "image" type, you don't need to put a value attribute to it, instead use the alt attribute. Plus I don't see the src attribute.

Your input should look more like :

<input type='image'  src='path/to/your/image.png' id='product_114' class='buy_button' name='Buy' alt='Add To Cart'  />

You can also custom a link using jquery like this :

HTML:

<form id="my-form">
  <a href="#" id="submit-link"/>
</form>

Javascript (jQuery):

$(#submit-link").click(function(e){
  e.preventDefault();
  $("#my-form").submit();
});

Answer 2

The <input type="image"> element has more caveats. In for example IE, you wouldn't receive buy as parameter name, but buy.x and buy.y.

The <input type="image"> is merely meant to present some kind of a map wherein the end-user would be able to point specific locations in.

But you don't want to do that. You just want a submit button with a background image. I would thus suggest to replace it by an <input type="submit"> with a CSS background-image which is set to url(path/to/your/image.png).

As to the outline: this is more a matter of the background position.