如何重置/删除chrome的输入突出显示/焦点边框？

282

我已经看到了chrome在:focus上放了一个较粗的边框，但是在我使用边框半径的情况下，它看起来也很类似。无论如何删除？如何重置/删除chrome的输入突出显示/焦点边框？

image: chrome :focus border

2010-05-31 Jiew Meng

BEST ANSWER：http：// stackoverflow。com/a/17526407/877860（你也必须摆脱盒子的阴影） – 2016-11-12 05:34:48

566

你应该能够使用

outline: none;

删除它，但请记住，这是潜在的不良可用性：这将是很难判断一个元素是否为焦点，它可以吸当您使用标签键浏览所有表单的元素时 - 您应该以某种方式反映元素的焦点。

来源

2010-05-31 12:41:37

我在'：focus'上改变了'background-color'和'color'属性/属性（无论你怎么称呼它），所以我猜它仍然ok – 2010-05-31 13:09:05

是的。全局设置'outline：none'就像一些重置一样，这是一个错误，因为它会降低键盘的可访问性，但如果你有另一种明确的反映对焦的方式，移除'outline'也可以。 – bobince 2010-05-31 13:23:13

+12

注意这是一个非常糟糕的做法。这会使键盘使用非常烦人。 – WhyNotHugo 2012-07-26 15:39:45

您可以将outline: none;设置为不同的焦点边框。

来源

2010-07-24 01:12:43 asawilliams

要删除默认的焦点，请使用默认.css文件如下：

:focus {outline:none;}

然后，您可以控制焦点边框颜色单独的元素，或在默认的CSS：

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

显然用您选择的十六进制代码代替red。

你也可以离开边界不变，并控制背景颜色（或图片）以高亮显示：

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

:-)

来源

2011-07-06 10:56:25

这肯定会工作。橙色轮廓不会显示出来了.. 通用于所有标签：

*:focus { 
    outline: none; 
    }

具体到一些标记，例如：输入标签

input:focus{ 
    outline:none; 
    }

来源

2013-04-19 06:29:27

我不得不做的所有后续的彻底清除它

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

来源

2013-07-08 12:17:31 George

+14

这应该是最好的答案，它是唯一一个完全消除焦点上的阴影/边界的答案。 – Tyguy7 2014-07-11 22:04:52

唯一的解决方案， – Oleg 2014-12-28 02:33:45

终于我找到了一个适用于手机！ – cawecoy 2015-04-02 10:30:35

问题是当你已经有一个大纲。铬仍然会改变一些事情，这是一个真正的痛苦。我找不到什么改变：

.search input { 
    outline: .5em solid black; 
    width:41%; 
    background-color:white; 
    border:none; 
    font-size:1.4em; 
    padding: 0 0.5em 0 0.5em; 
    border-radius:3px; 
    margin:0; 
    height:2em; 
} 

.search input:focus, .search input:hover { 
    outline: .5em solid black !important; 
    box-shadow:none; 
    border-color:transparent;; 
} 

.search button { 
    border:none; 
    outline: .5em solid black; 
    color:white; 
    font-size:1.4em; 
    padding: 0 0.9em 0 0.9em; 
    border-radius: 3px; 
    margin:0; 
    height:2em; 
    background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE)); 
    background: -webkit-linear-gradient(#4EB4F8, #4198DE); 
    background: -moz-linear-gradient(top, #4EB4F8, #4198DE); 
    background: -ms-linear-gradient(#4EB4F8, #4198DE); 
    background: -o-linear-gradient(#4EB4F8, #4198DE); 
    background: linear-gradient(#4EB4F8, #4198DE); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE'); 
    zoom: 1; 
}

No focus With focus

来源

2014-04-29 19:57:44

的simpliest方法是使用这样的事情，但请注意，它可能不是那么好。

input { 
    outline: none; 
}

我希望你觉得这个有用。

来源

2014-07-31 13:34:40 miksiii

border:0; 
outline:none; 
box-shadow:none;

这应该可以做到。

来源

2014-08-20 16:47:35 noelietrex

如何重置/删除chrome的输入突出显示/焦点边框？

回答

相关问题