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

取消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下也是有这些默认样式的,加这个也能同样取消。

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

评论 32

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

    Hi my friend! I wish to say that this article is amazing, nice written and include almost all significant infos. I would like to see more posts like this .

    Nonton Anime2周前 (05-11)回复
  2. #26

    Merely wanna comment that you have a very decent web site, I enjoy the pattern it really stands out.

    cat care2周前 (05-08)回复
  3. #25

    every woman loves to wear those pretty but expensive diamond rings, i would love to give my girlfriend a diamond ring.,

    agen poker2周前 (05-04)回复
  4. #24

    Looks realy great! Thanks for the post.

    Eczeem1个月前 (04-19)回复
  5. #23

    Nice post! Thank you.

  6. #22

    Looks realy great! Thanks for the post.

    gezichtsbehandeling1个月前 (04-18)回复
  7. #21

    Keep up the good work! Thanks.

    Anti aging1个月前 (04-18)回复
  8. #20

    Thanks for this nice post. …

    Huidspecialisaties1个月前 (04-17)回复
  9. #19

    Wonderful post! We will be linking to this particularly great article on our website. Keep up the great writing.

    DMC51个月前 (04-12)回复
  10. #18

    You’ve made some decent points there. I checked on the web for more information about the issue and found most individuals will go along with your views on this web site.

    DMC51个月前 (04-08)回复
  11. #17

    The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important. [Reply]

    my singing monsters2个月前 (03-28)回复
  12. #16

    Its fantastic as your other posts : D, appreciate it for putting up.

    Candelaria Thurston2个月前 (03-11)回复
  13. #15

    看看先

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

    不错哦 收集先

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

    看看,学习了~~

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

    一直很喜欢chrome

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

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

    skway8年前 (2011-10-20)回复
  18. #10

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

    Afei8年前 (2011-08-01)回复
  19. #9

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

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

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

    感激不尽!正需要这个 😳

    Maplews8年前 (2011-07-07)回复
  21. #7

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

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

      ifener8年前 (2011-07-14)回复
  22. #6

    这个得学习一下。

    Demon8年前 (2011-06-16)回复
  23. #5

    细节啊

    hear8年前 (2011-05-09)回复
  24. #4

    细节决定成败!! :mrgreen:

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

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

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

      浩子8年前 (2011-04-23)回复
  26. #2

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

    UJOHN8年前 (2011-04-22)回复
  27. #1

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

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

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

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

立即前往