HTML Invisible Submit Input Pitfalls and Advantages
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开发者_如何学Go 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>
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/
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!
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/
Why don't you just use <input type="image" /> instead of mucking around with this styling mess.
加载中,请稍侯......
精彩评论