2

What are the pitfalls and advantages of doing the following for submit elements?

<!doctype html>
<style>
  label input{display:none}
  label span{background:blue;border:1px solid black;color:white;padding:4px;}
</style>
<form action=#>
  <label>
    <span>Submit</span>
    <input type=submit value=Submit name=Submit>
  </label>
</form>

add an example jsbin.com/onabo4.

Supposedly IE and a few other browser have input submit styling problems. Is the above a good solution? Adding overflow:auto fixes IE browser rendering issues, unless you are inside a table. Is the above a good solution?

What are other issue might the above code solve?

EDIT: This appears to also solve the display:block issue for input elements, provided you want an input of type=sumbit. The issue is explained here: input with display:block is not a block, why not?

EDIT 2: For code purists and cross browser support I advise doing the following: The onclick is probably optional but some browser may not support label elements. The tabindex is to allow the user to be able to tab element. Basically tabindex adds keyboard friendliness.

<!doctype html>
<style>
    .type-submit input{display:none;}
    .type-submit{background:pink /* more pretty styles.... */}
</style>
<label onclick=this.form.submit() tabindex class=type-submit>
   Sumbit<input type=submit>
</label>
Community
  • 1
  • 1
Lime
  • 13,400
  • 11
  • 56
  • 88
  • 2
    Huh, learn something new everyday, that is a very interesting idea (until it is run in a browser that doesn't support labels for buttons). – Jess Apr 27 '11 at 15:07
  • @mazzzzz Thats a lot of zs :) anyways I assumed all modern browsers support label tags. I'm not to worried about N4 or IE5 if those are the only issues. – Lime Apr 27 '11 at 15:11

4 Answers4

1

Seems like a good solution to me. Test it and try it in the browsers you support, and if it works, you're good to go!

cdeszaq
  • 30,869
  • 25
  • 117
  • 173
1

Seems easier and more widely supported to simply use jQuery UI's button element. Styling is a little more up-to-date, and you can build buttons on href links, input type=submits OR button elements. Also, you get the styling improvements of rounded corners, gradients, patterns, and even hover if you choose. Since it's progressively enhanced, it has great backward compatibility.

Here's a great tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
  • JQuery is a great library along with the ui, but I wasn't really looking for an alternative. I was trying to validate the solution. JQuery UI is cool except for mobile phones, add then well its a nightmare. – Lime Apr 27 '11 at 15:20
1

It's is a good solution. I would add a onClick="this.parentNode.submit()" to the label (just in case the browser doesn't support clicking on a label to click a button).

The fiddle: http://jsfiddle.net/vqtp9/1/

Jess
  • 8,628
  • 6
  • 49
  • 67
  • That's a good idea! Although, I would use `this.form.submit()` just in case you decide to wrap the labels in p or divs or something. Also it is shorter. http://jsfiddle.net/vqtp9/2/ :) – Lime Apr 27 '11 at 17:03
-1

Why don't you just use <input type="image" /> instead of mucking around with this styling mess.

Kon
  • 27,113
  • 11
  • 60
  • 86
  • 1
    Then I would have to create a separate image for every submit element. That sounds like a lot of unneeded work for simple style additions. – Lime Apr 27 '11 at 15:16
  • Well, you never said you had to create a bunch of buttons. – Kon Apr 27 '11 at 20:59