使用 css 删除摘要元素中的蓝色边框

Question

我正在迈出学习编码的第一步。我已经在 Internet 上学习了一些课程，现在我决定在构建 Wordpress 子主题时继续从经验中学习。

重点是我做了一个总结。当它处于活动状态时，它有一个蓝色边框。

我正在尝试删除它，但找不到解决方案。

我试过起诉这个但没有成功：

summary:active {
    border:none;
}

你有什么建议吗？

Answer 1

将其从所有 input 中删除

input {
  outline: none;
}

要从所有标签中删除它，请使用通用选择器 *:

*:focus {
  outline: none;
}

Answer 2

summary:focus{
    outline: none;
}

浏览器在聚焦时在摘要周围呈现边框。

Answer 3

问题出在输入字段，而不是摘要 class 本身。您可以尝试使用以下代码将其删除：

    input:focus{
        outline:none;
    }

希望对您有所帮助

Answer 4

如果它是一个输入字段，试试这个

input:focus{
  outline: none !important;
 }

Answer 5

问题： Its not the border但是浏览器呈现的轮廓。

解决方法：Set outline:none元素上

所以代码是

summary:focus{
    outline: none;
}

Answer 6

人们说用 outline: none 删除，这将删除轮廓。

但是，从可访问性的角度来看，您应该将大纲替换为符合品牌指南的大纲。

元素 focus 状态上的 outline 是为了确保有人可以知道他们在哪里。并非所有用户都有点击设备，即使有，他们也不会一直将鼠标悬停在某个元素上。对于字段输入，值得保留 outline 或其他 focus 样式，以便用户知道他们在哪个字段中。

我建议这样做而不是这样做：

summary:focus {
  outline: none !important
}

你跟设计师商量出一个积极的focus风格，例如：

summary:focus {
  background: #ffeeee;
  color: #242424;
  outline: none
}

Answer 7

我能够让蓝色轮廓在 Safari 10 中消失：

summary {outline:none;}

有趣的是我不能改变轮廓的具体颜色：

summary:focus{outline:red;}

Α也去掉了轮廓。使用 solid 和 dotted 都按规定工作，并显示为黑色。

但看起来蓝色是硬编码到焦点输入字段中的。我现在使用的文本框具有相同的浅蓝色轮廓。也许无法更改，但您可以抑制其可见性或重新设计它的样式。你只是不能指定颜色。

Answer 8

*.no-outline > * :focus {
    outline: none;
}

这将删除带有 class no-outline 的任何标签的任何轮廓，并且还将删除其所有子标签的轮廓。

removing the blue borders in a summary element using css