如何重置/删除铬的输入高亮/焦点边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (8)
  • 关注 (0)
  • 查看 (117)

我见过把更宽的边框:focus但在我的例子中,我也使用了边界半径。有什么要去掉的吗?

提问于
用户回答回答于

您应该能够使用

outline: none;

但请记住,这可能不利于可用性:很难判断一个元素是否是集中的,当您使用Tab键遍历表单的所有元素时,它可能会很糟糕--您应该在某种程度上反映某个元素是集中的。

用户回答回答于

问题是当你已经有了一个解决方案。Chrome仍然改变了一些东西,这是真正的痛苦。我找不到应该改变什么:

.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;
}
用户回答回答于

最简单的方法是使用这样的东西,但请注意,它可能不是那么好。

input {
  outline: none;
}

我希望你能找到有用的东西。

用户回答回答于

你可以直接outline: none;和边框上的颜色不同的对焦。

用户回答回答于
border:0;
outline:none;
box-shadow:none;

这应该能起作用。

用户回答回答于

这肯定会成功的。橙色轮廓不会再出现了。所有标签通用:

*:focus {
    outline: none;
   }

特定于某些标记,ex:Input标记

input:focus{
   outline:none;
  }
用户回答回答于

若要删除默认焦点,请在默认情况下使用以下内容。CSS文件:

:focus {outline:none;}

然后,可以通过元素或默认情况分别控制焦点边框颜色。CSS:

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

明显替代red用你选择的十六进制密码。

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

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

*-)

用户回答回答于

我必须完成以下所有的操作才能完全删除它

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

所属标签

可能回答问题的人

  • HKC

    红客学院 · 创始人 (已认证)

    26 粉丝7 提问5 回答
  • Dingda

    Dingda · 站长 (已认证)

    4 粉丝0 提问3 回答
  • 西风

    renzha.net · 站长 (已认证)

    9 粉丝1 提问3 回答
  • 螃蟹居

    1 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券