当一个HTML元素被“聚焦”(当前选中/插入)时,许多浏览器(至少是Safari和Chrome)会在其周围放置一个蓝色边框。

对于我正在处理的布局,令人分心并且看起来不正确。

<input type="text" name="user" class="middle" id="user" tabindex="1" />


Firefox似乎没有这样做,或者至少让我用以下方法控制它:

border: x;


如果有人可以告诉我IE的性能,我会很好奇。

使用Safari消除这点眩光会很好。

#1 楼

对于您的情况,请尝试:

input.middle:focus {
    outline-width: 0;
}


或者一般来说,会影响所有基本形状元素:

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



在评论中,诺亚·惠特摩尔(Noah Whitmore)建议更进一步,以支持将contenteditable属性设置为true的元素(有效地使其成为输入元素的一种)。以下内容也应该针对这些对象(在支持CSS3的浏览器中):

[contenteditable="true"]:focus {
    outline: none;
}


尽管我不建议这样做,但出于完整性考虑,您始终可以禁用焦点概述以下所有内容:

*:focus {
    outline: none;
}


请记住,焦点轮廓是可访问性和可用性功能;它会提示用户当前所关注的元素。

评论


谢谢Cory,很好的提示。您还需要将CSS分配给textarea以覆盖所有输入字段。输入:焦点,文本区域:焦点{概述:无;}

– BaronGrivet
2011-10-17 2:35



不要忘记select以及select:focus {outline:none;}

–极客数字88
2011-10-26 18:46



还有

#2 楼

要从所有输入中删除它

input {
 outline:none;
}


#3 楼

这是一个旧线程,但是作为参考,重要的是要注意,不建议禁用输入元素的轮廓,因为它会阻碍可访问性。

outline属性的存在是有原因的-为用户提供清晰的指示键盘焦点。有关此主题的更多信息和其他资源,请访问http://outlinenone.com/

评论


Boaz,仅供参考,input.middle {outline:none}仍将允许您遍历元素(包括input.middle)。按下Tab键也会将焦点放在输入标签上。唯一的事情是您将看不到它的焦点(轮廓焦点)。因此,使用它并不是那么有害。.:)

– Anish Nair
2013年1月31日7:13



@AnishNair唯一的事情是您将看不到它的焦点(轮廓焦点),这正是我的意思。删除轮廓将禁用焦点事件的视觉指示,而不是实际事件。删除视觉指示意味着您要为依赖该指示的残疾人感到更加困难。

– Boaz
13年1月31日在9:48

有时我们需要妥协,以实现目标:)

– Anish Nair
13年1月31日在10:31

@AnishNair是的。但是阅读此主题的人们通常会更喜欢不考虑其含义的简单方法(即outline:none;)。仅仅因为某些事情容易并且节省时间,并不意味着它是最佳实践:)

– Boaz
13年1月31日在10:43

我来不及讨论,但是您仍然可以设置输入的聚焦状态的样式(例如更改边框的颜色或宽度)。只要在执行此操作时牢记可访问性(良好的对比度等),它与默认轮廓一样容易访问。

–麦格
2014年7月25日在17:42

#4 楼

这使我困惑了一段时间,直到我发现这条线既不是边界也不是轮廓,而是阴影。因此,要删除它,我必须使用:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}


#5 楼

这是一个常见的问题。

浏览器呈现的默认轮廓很难看。

例如:




 form,
label {
  margin: 1em auto;
}

label {
  display: block;
} 

 <form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form> 






最推荐的最常见的“修复”是outline:none-如果使用不当,则会带来可访问性的灾难。


那么...轮廓到底有什么用?

我发现有一个非常干切的网站,可以很好地解释所有内容。


当使用TAB键(或等效键)浏览Web文档时,它为具有“焦点”的链接提供视觉反馈。
对于不能使用鼠标或有视觉障碍的人们特别有用。如果您删除了轮廓,则使这些人无法访问您的网站。


好吧,让我们尝试与上述相同的示例,现在使用TAB键进行导航。




 form,
label {
  margin: 1em auto;
}

label {
  display: block;
} 

 <form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form> 





注意,即使不单击输入也如何知道焦点在哪里?

现在,让我们在可靠的outline:none上尝试<input>

,因此,再次使用TAB键在单击文本后导航,看看会发生什么。




 form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
} 

 <form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form> 





弄清楚如何确定重点在哪里?唯一的信号是光标闪烁。我上面的示例过于简单。在实际情况下,页面上不会只有一个元素。与此类似的东西。




 .wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
} 

 <div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div> 





如果保持轮廓,现在将其与相同的模板进行比较:




 .wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
} 

 <div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div> 





因此,我们建立了以下


轮廓很丑陋
删除它们会使生活更加困难。

/>
答案是什么?

删除丑陋的轮廓并添加自己的视觉提示以指示焦点。

这是我的意思的一个非常简单的例子。

我删除轮廓,并在:focus和:active上添加底部边框。我还通过将:focus和:active(个人喜好)设置为透明来删除顶部,左侧和右侧的默认边框。




 form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
} 

 <form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form> 





因此,我们使用前面的“真实世界”示例尝试上述方法:




 .wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
} 

 <div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div> 





可以通过使用外部库来进一步扩展该库,该库基于修改“概述”的思想,而不是像Materialize一样完全删除它。

您可以得到一件并不丑陋且工作很少的东西




 body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
} 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div> 




#6 楼

唯一与我合作的解决方案
边框实际上是阴影。所以要隐藏它,我必须这样做:
input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }


#7 楼

我尝试了所有答案,但直到找到-webkit-tap-highlight-color,我仍然无法在Mobile上工作。

所以,对我有用的是...

* { -webkit-tap-highlight-color: transparent; }


评论


那就是我正在寻找的解决方案。当您使用诸如li之类的元素进行触摸屏体验时,此功能特别有用

– Anand G
19年3月14日在19:10

#8 楼

您可以使用CSS禁用它!
这是我用于禁用蓝色边框的代码:
*:focus {
    outline: none;
}

这是一个有效的示例

#9 楼

删除所有焦点样式通常对辅助功能和键盘用户不利。但是,轮廓很难看,为每个交互元素提供自定义的聚焦样式可能是一个真正的痛苦。

因此,我发现的最佳折衷方案是仅在检测到用户时才显示轮廓样式正在使用键盘进行导航。基本上,如果用户按下TAB键,我们将显示轮廓,如果用户使用鼠标,我们将其隐藏。

它不会阻止您为某些元素编写自定义焦点样式,但至少它提供了一个良好的默认设置。

这是我的操作方法:




 // detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
}); 

 body:not(.keyboardUser) *:focus {
  outline: none;
} 

 <p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/> 




评论


这是一种彻底的方法。点击监听器很不错。

– Keith DC
19年1月11日,下午5:37

#10 楼

使用此代码:

input:focus {
    outline: 0;
}


#11 楼

在Bootstrap 4中删除边框轮廓可以使用shadow-none,它将删除焦点轮廓。

            <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" class="form-control form-control shadow-none" 
                id="exampleInputEmail1"aria-describedby="emailHelp">
            </div>


#12 楼

您也可以尝试一下

input[type="text"] {
outline-style: none;
}




.classname input{
outline-style: none;
}


#13 楼

在Firefox中,所有解决方案都不适合我。

以下解决方案更改了Firefox焦点的边框样式,并将其他浏览器的轮廓设置为无。

我已经有效地使焦点边框从3px蓝色发光变为与文本区域边框匹配的边框样式。以下是一些边框样式:

虚线边框(边框2px虚线红色):


没有边框! (边界0像素):

文本区域边框(边界1像素纯灰色):


这里是代码:


 input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
} 

 <textarea id="textarea">yo</textarea> 




#14 楼

您可以使用以下命令删除文本/输入框周围的橙色或蓝色边框(轮廓):outline:none

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


#15 楼

2020年更新-:focus-visible
可访问性的好消息-Chrome和Firefox刚刚添加了对
:focus-visible的支持。
由于可访问性要求(键盘导航),隐藏焦点样式是不好的做法,这会使您的网站无法访问
使用:focus-visible伪类,并让浏览器确定何时应用焦点。
:focus-visible /* Chrome */

请注意,Firefox通过较早的带前缀伪类支持类似功能:
:-moz-focusring /* Firefox */




 button {
  color: #000;
  background-color: #fff;
  padding: 10px 16px;
  margin: 10px 0;
  border-radius: 4px;
}

button:focus {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

button:hover {
  background-color: #eee;
}

button.with-focus-visible:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

button.with-focus-visible:focus-visible, 
button.with-focus-visible:moz-focusring {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
} 

 <p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button> 




文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-visible
w3规范:https://www.w3.org / TR / selectors-4 /#the-focus-visible-pseudo

#16 楼

当焦点位于元素上时,使用以下CSS属性删除轮廓:

input:focus {
    outline: 0;
}


此CSS属性为焦点上的所有输入字段删除轮廓,或使用伪类删除轮廓使用以下CSS属性定义元素。

.className input:focus {
    outline: 0;
} 


此属性删除所选元素的轮廓。

#17 楼

试试这个CSS,对我有用
textarea:focus, input:focus{ border: none; }


评论


尽管此代码可以解决OP的问题,但最好包含有关您的代码如何解决OP的问题的说明。这样,将来的访问者可以从您的帖子中学习,并将其应用于自己的代码。 SO不是编码服务,而是知识资源。而且,更可能会推荐高质量,完整的答案。这些功能以及所有职位必须自成体系的要求,是SO作为平台的强项,可以将其与论坛区分开。您可以编辑以添加其他信息和/或在源文档中补充说明。

–ysf
6月25日晚上11:55

#18 楼

尝试以下操作:
*:focus {
    outline: none;
}

这会影响您的所有页面。