Custom button form submit

Posted on 2011-04-21
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
    LVL 75

    Accepted Solution

    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

    LVL 30

    Expert Comment

    by:Marco Gasi
    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

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Suggested Solutions

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now