首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何重置/移除chrome的输入突出显示/焦点边框?

如何重置/移除chrome的输入突出显示/焦点边框?
EN

Stack Overflow用户
提问于 2010-05-31 20:37:24
回答 7查看 474.9K关注 0票数 405

我已经看到chrome在:focus上放了一个更粗的边框,但在我的例子中,它看起来有点不对劲,我也使用了边框半径。有什么方法可以去掉它吗?

EN

回答 7

Stack Overflow用户

发布于 2013-07-08 20:17:32

我必须执行以下所有操作才能将其完全删除:

outline-style: none;
box-shadow: none;
border-color: transparent;

示例:

button {
  border-radius: 20px;
  padding: 20px;
}

.no-focusborder:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  background-color: black;
  color: white;
}
<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>

票数 145
EN

Stack Overflow用户

发布于 2011-07-06 18:56:25

要删除默认焦点,请在默认.css文件中使用以下内容:

:focus {outline:none;}

然后,可以按元素单独控制焦点边框颜色,也可以在默认.css中控制焦点边框颜色:

:focus {outline:none;border:1px solid red}

显然用你选择的十六进制代码替换red

您还可以保持边框不变,并控制背景颜色(或图像)以突出显示该字段:

:focus {outline:none;background-color:red}

:-)

票数 83
EN

Stack Overflow用户

发布于 2013-04-19 14:29:28

这肯定行得通。橙色轮廓将不再显示..对所有标签通用:

*:focus {
    outline: none;
   }

特定于某些标签,例如: input标签

input:focus{
   outline:none;
  }
票数 25
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2943548

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档