芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
9

IE 表单控件的按钮聚焦问题

作者 芒果/分类 代码/发布于 2010-10-24 20:55

按钮的写法有两种,一种是 <input value=”按钮”/> 或者 <button>按钮</button>,如果按钮用于表单提交,还必须加上 type 属性(type=”submit”)。为了美化按钮效果,一般会设置背景和边框属性。

但在 IE 下,表单区域获得焦点的情况下,如果按钮的 type 属性被设置为 submit,该按钮会自动触发聚焦效果。如下图所示:

<button type="submit">我说完了</button>

想要避免出现这个恶心的黑框,需要将 button 的 border 属性设置为 none,然后外面套一层容器,用来模拟按钮的边框效果。

看看这篇文章的评论框,抛弃了原先过于小的按钮样式。用户体验在于细节哈~

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/ie-form-control-button-focus-problem/" title="IE 表单控件的按钮聚焦问题" rel="bookmark">IE 表单控件的按钮聚焦问题 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 9 条群众意见

  1. Kars /2010-10-25 19:04

    我也去改一改哈~ 回应

    #1
  2. 惜墨|个人提升 /2010-10-25 22:15

    呵呵,挺有意思的啊。回头整一个。 回应

    #2
  3. IM路人 /2010-10-26 22:14

    哈哈,来体验下,我说完了。 回应

    #3
  4. 德意 /2010-10-26 23:08

    type=”submit” 一般都会写进去。 回应

    #4
  5. 苹果手机价格 /2010-10-27 11:39

    哈,体验下! 回应

    #5
  6. 哲哲 /2010-10-28 16:07

    嗯嗯,这个效果不错。 回应

    #6
  7. sss哲哲/2010-11-15 19:45

    对弹道弹道弹道弹道弹道弹道导弹 回应

    #7
  8. 严重浪漫 /2010-11-16 02:37

    好玩啊。收藏了。 回应

    #8
  9. ?
    自定义文件上传控件样式(兼容 IE6) | 千里走单骑 /2011-06-22 18:41

    […] IE 表单控件的按钮聚焦问题 (8) © 2010 芒果 版权所有 | 固定链接 | 没有评论 | 标签 CSS, IE6 View full post on 芒果小站 […] 回应

    #9

下面我简单说几句