advanced code snippet search

Posted By

karlhorky on 07/10/10


Tagged

css javascript image html input type button images submit background types coordinates coordinate backgroundimage backgroundimages coord coords


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

satsuma


CSS: Submit Button Background Images

 / Published in: CSS
 

There are three different types of elements that submit forms:

  • <input type="image">
  • <input type="submit">
  • <button type="submit">

Logically, it would seem that you would want to use input type="image" if you wanted to display an image instead of a default button. However, using input type="image" causes the page to submit two extra variables for your x and y mouse click coordinates on the image as below. Unless you are specifically using this for advertising or some purpose that takes advantage of the coordinates, this is just unnecessary data that also causes the URL to become more complex.

Example URLs:

  • type="submit"
    • http://www.site.com/form.php?query=searchterm
  • type="image"
    • http://www.site.com/form.php?query=searchterm&x=0&y=0

Additionally, if you do not require additional information pertaining to the submit to be passed to the server (eg. you do not need to have two submits with different purposes), you can use a button element instead of an input. This also allows for simple hiding of the display text as outlined with the .hide-text class in this snippet (for if you wanted to put the text in the image instead).

This solution has been tested to work in:

  • Microsoft Internet Explorer 6, 7, 8
  • Mozilla Firefox 3.6
  • Google Chrome 5
  • Apple Safari 5
  • Opera 10
Expand | Embed | Plain Text 
  1. This solution applies to a button-span pair defined as follows:
  2.  
  3. <button type="submit" class="submit-button"><span class="hide-text">Submit the form</span></button>
  4.  
  5.  
  6. CSS
  7. ===
  8. .submit-button {
  9.   width: 30px;
  10.   height: 15px;
  11.   background: url(/your/button.png) no-repeat; /* Need full background declaration for IE 6 (instead of the shorter background-image) */
  12.   border: none;
  13.   cursor: pointer;
  14.   cursor: hand; /* For IE 5.0 and 5.5 */
  15.   vertical-align: top;
  16. }
  17.  
  18. .hide-text {
  19.   display: block
  20.   width: 0;
  21.   height: 0;
  22.   overflow: hidden;
  23. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: vagrantradio on July 11, 2010

text-indent:-9999; also works for block items instead of hiding it with a span.

Posted By: vagrantradio on July 11, 2010

text-indent:-9999; also works for block items instead of hiding it with a span.

Posted By: karlhorky on November 8, 2010

Yeah, the text-indent off the left edge of the screen will work too, but I've encountered a problem on clicking these types of text-indent links where a dotted outline appears to go off the left side of the screen too. It looks like there is a way to fix this with some additional CSS / JavaScript (as per the link below), but I would rather place additional markup in the code instead of implementing a fix.

http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/

Posted By: sereal on November 25, 2010

please show me how to make searchform position vertical-middle within a DIV without the use of padding / margin

Posted By: karlhorky on November 28, 2010

Sereal, is there any reason you're avoiding using margins? There's a number of solutions outlined in the post below, but the best use negative margins. I would reconsider trying to use margins - you should be able to make them work with any kind of design you have.

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

You need to login to post a comment.