如何解决HTML不可见的提交输入陷阱和优点
| 对提交元素执行以下操作有哪些陷阱和优势?<!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>
添加示例jsbin.com/onabo4。
据说IE和其他一些浏览器都有输入提交样式问题。以上是好的解决方案吗?除非您在表中,否则添加1可以解决IE浏览器呈现问题。以上是好的解决方案吗?
上面的代码还可以解决什么其他问题?
编辑:这似乎也解决了输入元素的display:block问题,只要您想要输入type = sumbit。该问题的解释如下:display:block输入不是一个块,为什么不呢?
编辑2:对于代码纯粹主义者和跨浏览器支持,我建议您执行以下操作:
onclick可能是可选的,但某些浏览器可能不支持标签元素。 tabindex允许用户使用Tab键标记元素。基本上,tabindex增加了键盘的友好性。
<!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>
解决方法
这是一个很好的解决方案。我会在标签上添加一个“ 3”(以防浏览器不支持单击标签来单击按钮)。
小提琴:http://jsfiddle.net/vqtp9/1/
,对我来说似乎是一个很好的解决方案。在支持的浏览器中对其进行测试并进行尝试,如果可以运行,那就太好了!
,只需使用jQuery UI的button元素,似乎更容易获得更广泛的支持。样式是最新的,您可以在href链接上构建按钮,输入type = submits OR按钮元素。此外,如果您选择的话,还可以获得圆角,渐变,图案甚至悬停的样式改进。由于它的逐步增强,因此具有很大的向后兼容性。
这是一个很棒的例子:http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
,您为什么不只使用ѭ4来代替这种样式混乱呢?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。