首页 > 课堂 > 浏览器 > 正文

谷歌浏览器怎么去掉默认焦点边框(input边框)?

2024-07-16 17:55:47
字体:
来源:转载
供稿:网友

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

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

复制内容到剪贴板
  1. <html>      
  2. <head>      
  3.     <style>      
  4.     </style>      
  5. </head>      
  6. <body>      
  7.     <input type="text" id="a" />      
  8.     <textarea id="b"></textarea>      
  9. </body>      
  10. </html>   

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

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

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

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表