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

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.

Answer 2

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();
});

友情链接