首页 文章

如何删除文本/输入框周围的边框（轮廓）？ （Chrome）[重复]

提问于
浏览 次
1021

这个问题在这里已有答案：

任何人都可以解释如何删除文本/输入框周围的橙色或蓝色边框（轮廓）？我认为只有Chrome才会显示输入框处于活动状态 . 这是我正在使用的输入CSS：

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

enter image description here

css google-chrome input border

11 回答

  • 11

    请使用以下语法删除文本框的边框，并删除浏览器样式的突出显示边框 .

    input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
    回复于
  • 106
    <input style="border:none" >

    为我工作得很好 . 希望在html本身修复它... :)

    回复于
  • 20

    我发现你也可以使用：

    input:focus{
   border: transparent;
}
    回复于
  • 51

    这将从所有元素和任何元素中删除chrome中的橙色框架，无论它在何处和何处

    *:focus {
    outline: none;
}
    回复于
  • 1908

    此边框用于显示元素已聚焦（即您可以键入输入或按Enter键按钮） . 但是你可以删除它：

    textarea:focus, input:focus{
    outline: none;
}

    您可能希望为用户添加一些其他方式，以了解哪些元素具有键盘焦点，但可用性 .

    Chrome还会将突出显示应用于其他元素，例如用作模式的DIV . 为了防止在这些元素和所有其他元素上突出显示，您可以：

    *:focus {
    outline: none;
}
    回复于
  • 85

    目前的答案对Bootstrap 3.1.1不起作用 . 这是我必须覆盖的内容：

    .form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
    回复于
  • 10

    我找到了解决方案 .
    我在CSS中使用了： outline:none; ，它似乎有效 . 无论如何，谢谢你的帮助 . :)

    回复于
  • 35

    这肯定会奏效 . 橙色轮廓将不再显示..所有标签的共同点：

    *:focus {
    outline: none;
}

    特定于某些标签，例如：输入标签

    input:focus {
   outline:none;
}
    回复于
  • 10
    input:focus {
    outline:none;
}

    这样做 . 橙色轮廓将不再显示 .

    回复于
  • 24

    组

    input:focus{
    outline: 0 none;
}

    “！important”就是以防万一 . 这不是必要的 . [现在它已经消失了 . -Ed . ]

    回复于
  • 16

    Solution

    *:focus {
    outline: 0;
}

    PS：在焦点上使用 outline:0 而不是 outline:none . 这是有效的，更好的做法 .

    回复于

相关问题