网页中按钮的奇怪突出显示

Question

我尝试设计一个网站的样式，当我按 TAB 键浏览按钮时，出现了一个奇怪的突出显示。它应该只是按钮的边框，但在提供的图像中它看起来不是那样的。如果你能告诉我原因，我会很高兴。这是 css 和 html 图片 code/design.

.pagination-buttons {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
}

.pagbut {
  background-color: white;
  width: 16px;
  height: 8px;
  border: 1px solid #06d6a0;
  border-radius: 100px;
  cursor: pointer;
}

.button-fill {
  background-color: #06d6a0;
}

      <div class="pagination-buttons pagi-design">
        <button class="pagbut">&nbsp;</button>
        <button class="pagbut button-fill">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
      </div>

Answer 1

这是因为   这呈现了一个 space，它还有一个高度，甚至很难看到它。

所以当您 select 按钮时，您也会 select 里面的文字。

针对您的问题的两种解决方案：删除 space（就像我对第一个按钮所做的那样）或将 overflow: hidden 设置为按钮，这样文本就不会溢出容器。

.pagination-buttons {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
}

.pagbut {
  background-color: white;
  width: 16px;
  height: 8px;
  border: 1px solid #06d6a0;
  border-radius: 100px;
  cursor: pointer;
  overflow: hidden;
}

.button-fill {
  background-color: #06d6a0;
}

<div class="pagination-buttons pagi-design">
        <button class="pagbut"></button>
        <button class="pagbut button-fill">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
        <button class="pagbut">&nbsp;</button>
      </div>

网页中按钮的奇怪突出显示

Strange highlight of a button in webpage

html

css

button

web