在 Chrome 中找不到焦点/单击按钮的 css [重复]答案

【问题标题】：Can't find the css for a focused/clicked button in Chrome [duplicate]在 Chrome 中找不到焦点/单击按钮的 css [重复]
【发布时间】：2019-05-16 04:58:08
【问题描述】：

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

我已将边框半径设置为 50% 以使其变圆。如何将按钮周围的焦点突出显示为圆形或根本不显示？

我似乎在 Chrome 乞丐中找不到 :focus 或 :clicked css。

这里是html

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

【问题讨论】：

据我所知，您无法将border-radius 应用于outline，但如果您需要符合半径的高光，您可以改用box-shadow。让它看起来像原生轮廓应该很容易。如果您有任何后续问题，请@我，我会在今晚稍后回复。

标签： html css

【解决方案1】：

您只需覆盖用户代理样式表并将默认的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;
}

&lt;button&gt;FOCUS&lt;br/&gt;TEST&lt;/button&gt;

【讨论】：