html - 在 Chrome 中找不到聚焦/单击按钮的 css

标签 html css

<分区>

我在下面有这张图片,它是一个按钮。

我将 border-radius 设置为 50% 以使其呈圆形。 如何将按钮周围的焦点高亮设置为圆形或根本不显示?

我似乎无法在 Chrome begugger 中找到 :focus 或 :clicked css。

enter image description here

这是html

<button id="frontSave" type="button" class="btn btn-lg"><i id="cameraIconFront" class="fal fa-camera fa-2x"></i></button>

最佳答案

您只需覆盖用户代理样式表并将默认的 outline 替换为 border

干杯

body {text-align:center}

button {
  border-radius: 50%;
  margin: 2rem;
  padding: 2rem;
  border: transparent 3px solid;
}

button:focus {
  outline: none;
  border: red 3px dotted;
}   
<button>FOCUS<br/>TEST</button>

关于html - 在 Chrome 中找不到聚焦/单击按钮的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53787898/

上一篇:html - 尝试对齐列表容器内的文本时出现问题

下一篇:html - 在 Bootstrap 4 旋转木马中居中图像(垂直和水平)

相关文章:

javascript - HTML5 翻译相对于页面

javascript - 可以从浏览器中拖动的隐藏文本?

html - 为什么这个 CSS 选择器不起作用?

javascript - 我将如何根据所选语言订购品牌 div?

css - 如何避免 Bootstrap 3 中的 div 换行和行高

javascript - 为什么我的 Bootstrap 3.1.1 'Collapse' 元素会自动关闭?

javascript - HTML 输入 - 删除前导字符

css - 排列元素而不考虑它们的大小

css - 有没有一种方法可以在元素上使用 CSS3 制作斜 Angular ?

html - IE8 不会将图像放在 div 上