Custom button form submit

Posted on 2011-04-21
Medium Priority
Last Modified: 2012-05-11
I am trying to create a simple button for form submission. Pretty simple... however I want to use a specific css sprite button... I have tried a number of variations of the following... this works the best, but I still get a Submit or Submit Query text over the button... thoughts?

<input type="image" name="submit" id="next" title="" alt="">
<a id="next" title=""></a></input>
Question by:pixelscape
  • 2
LVL 75

Accepted Solution

Michel Plungjan earned 2000 total points
ID: 35442680
That is not valid html

<input type="image" name="submit" id="next" title="" alt="" />

document.write('<a href="#" onclick="document.forms[0].submit(); return false"><img src="sprite.gif" border="0"/></a>')
<input type="image" name="submit" id="next" title="" alt="" />

Open in new window

is. But what browsers insist on giving you that text?


Author Comment

ID: 35442750
LVL 31

Expert Comment

by:Marco Gasi
ID: 35442978
You can use css also: use <input type='submit'> and give it a class. Then in css file you c write something like this:

  width: 100px;
  height: 24px;
  margin: 0;
  padding-bottom: 4px;
  border: 0;
  cursor: pointer;  hand-shaped cursor
  cursor: hand; /* for IE 5.x */
  background: transparent url('path_to_image') top center no-repeat;


Author Comment

ID: 35443265
I just used color: transparent on the buttons css. Thanks!

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question