路由器

电脑

手机

网络

在谷歌浏览器中去掉默认焦点边框的方法技巧

来源：www.45fan.com  2016-10-26 10:29:32

在谷歌浏览器中去掉默认焦点边框的方法技巧

 

使用谷歌浏览器时，当鼠标焦点在文本输入框（input、textarea）时，谷歌浏览器默认会给它们加上边框，但我们有时并不需要这边框，所以要通过代码去掉。

在谷歌浏览器中去掉默认焦点边框的方法技巧

1、获得焦点时，默认会出现边框

复制内容到剪贴板
  1. <html>
  2.  
  3. <head>
  4.  
  5. <style>
  6.  
  7. </style>
  8.  
  9. </head>
  10.  
  11. <body>
  12.  
  13. <inputtype="text"id="a"/>
  14.  
  15. <textareaid="b"></textarea>
  16.  
  17. </body>
  18.  
  19. </html>

在谷歌浏览器中去掉默认焦点边框的方法技巧

2、在CSS中用下面的代码可以去掉边框：

复制内容到剪贴板
  1. input,textarea:focus{
  2.  
  3. outline:none;
  4.  
  5. }

在谷歌浏览器中去掉默认焦点边框的方法技巧

在谷歌浏览器中去掉默认焦点边框的方法技巧

3、如果需要，可以给元素增加边框样式：input,textarea:focus { outline:Blue Solid 4px; }，但要先去掉：input,textarea:focus {outline: none;}

 

 

在谷歌浏览器中去掉默认焦点边框的方法技巧

在谷歌浏览器中去掉默认焦点边框的方法技巧

4、如果你想去掉所有默认边框可加入下面代码：

复制内容到剪贴板
  1. *:focus{
  2.  
  3. outline:none;
  4.  
  5. }

在谷歌浏览器中去掉默认焦点边框的方法技巧

 
推荐阅读