关注前端开发
关注用户体验

取消chrome浏览器下input和textarea的默认样式

最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式。这是大前端调整的样式,样式统一就是好看,o(∩_∩)o 哈哈····

看代码:

取消chrome下input和textarea的聚焦边框:

input,button,select,textarea{outline:none}

取消chrome下textarea可拖动放大:

textarea{resize:none}

最后,写在一起,重置input和textarea的默认样式:

input,button,select,textarea{outline:none}
textarea{resize:none}

ok,问题解决,好像safari下也是有这些默认样式的,加这个也能同样取消。

未经允许不得转载:大前端 » 取消chrome浏览器下input和textarea的默认样式
分享到:更多 ()

评论 20

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #15

    看看先

    jqueryfuns3年前 (2014-02-10)回复
  2. #14

    不错哦 收集先

    wordpress教程网4年前 (2013-04-16)回复
  3. #13

    看看,学习了~~

    五月兰5年前 (2012-09-24)回复
  4. #12

    一直很喜欢chrome

    FK博客5年前 (2012-05-02)回复
  5. #11

    这个不错,还以为在chorme是不能改的呢

    skway6年前 (2011-10-20)回复
  6. #10

    我一般写一个全局的*:focus{outline:none;},极少的input会给focus边框样式,统一的边框,input,textarea,行,块的设置!

    Afei6年前 (2011-08-01)回复
  7. #9

    多好的体验。被说成不好了。先说焦点。高亮当前输入框。怎么就不好了。再说textarea的拖动这个就更好了。影响布局从何说起?你不去拖它。不就啥事也没了。有时候要输入较多的代码时。拉长后多安逸。。。

    Await6年前 (2011-07-29)回复
    • 有时input默认色和网站背景色不相衬是还是有必要去掉的

      yusting2年前 (2015-05-07)回复
  8. #8

    感激不尽!正需要这个 😳

    Maplews6年前 (2011-07-07)回复
  9. #7

    :mrgreen: :sad: 😛 :smile: 😮 😉 😉 😯 😯 😯 ❗ ❗ 这个评论框这么大,当然木问题了。评论框小的话,应该让它能拉伸。这表情好不给力啊

    狗狗咪6年前 (2011-06-22)回复
    • 这个不错,有时候TEXTAREA拉来拉去的确实很是烦。

      ifener6年前 (2011-07-14)回复
  10. #6

    这个得学习一下。

    Demon6年前 (2011-06-16)回复
  11. #5

    细节啊

    hear6年前 (2011-05-09)回复
  12. #4

    细节决定成败!! :mrgreen:

    Jayuh6年前 (2011-04-25)回复
  13. #3

    我之前曾尝试去reset这个表现,就是因为我们的变态测试提单,说要与ie的显示效果要一致啊!!!
    我还巴不得使用更多ie不支持的属性啊!!!
    这样才能让用ie的人更想更换浏览器啊!!!
    尼玛的测试没事提什么破单啊!!!!
    尼玛的天天调戏你设计的按钮,有木有!!!有木有!!!
    一个劲的玩弄你设计的动画,有木有!!!!有木有!!!
    哈哈 最近喜欢上咆哮体~咆哮得没啥水平见笑了~主要是在你地盘咆哮不会被追究 :mrgreen:

    亚美蝶6年前 (2011-04-23)回复
    • 额,咆哮是我们在web上的另一片热土啊,很有水平,哈哈

      浩子6年前 (2011-04-23)回复
  14. #2

    我想知道前端的文章列表左边那个缩略图,鼠标移过去缩小朦胧,离开恢复正常是怎么实现的呢?

    UJOHN6年前 (2011-04-22)回复
  15. #1

    我觉得那个不用去掉更好,我还希望IE等也有这样的支持呢 :mrgreen:

    liveme6年前 (2011-04-20)回复
    • 哈哈,有时候会影响页面效果,去了再加上适合页面的,岂不更好!! :mrgreen:

      浩子6年前 (2011-04-20)回复

themebetter 国内更好的WordPress主题服务商

立即前往