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

番茄系统家园 · 2023-01-05 07:51:47

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

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

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

复制内容到剪贴板

  •   
  •   
  •   
  •   
  •     
  •   
  •        
  •   
  •   
  •   
  •   
  •   
  •     "text" id="a" />   
  •   
  •        
  •   
  •   
  •   
  •    
  • 谷歌浏览器怎么去掉默认焦点边框(input边框)?

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

    复制内容到剪贴板

    1. input,textarea:focus {   
    2.   
    3.            outline: none;   
    4.   
    5.       }  

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

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

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

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

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

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

    复制内容到剪贴板

    1. *:focus {   
    2.   
    3.             outline: none;   
    4.   
    5.        }  

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

    免责声明: 凡标注转载/编译字样内容并非本站原创,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如果你觉得本文好,欢迎推荐给朋友阅读;本文链接: https://m.nndssk.com/chrome/175051QWXsii.html
    猜你喜欢
    最新应用
    热门应用