按钮点击后边框颜色无法与hover状态一致，设置focus、active选择器无效

云原生阿岚

2026-9-25

问题原因

你当前使用了Bootstrap UI框架，框架内置的.btn-primary系列样式优先级高于你自定义的单类选择器样式，导致你写的:focus、:active样式被覆盖
Bootstrap默认定义了:focus-visible、:active:focus等多类组合状态的样式，你只单独定义了:focus选择器，没有覆盖全部交互场景

解决方案

修改你的CSS代码如下即可生效：

/* 选择器增加button标签限定，提升优先级，避免被Bootstrap默认样式覆盖 */
button.btn-primary {
  font-weight: 700;
  border-radius: 300px;
  padding: 1rem 2rem;
  background-color: #F05F44;
  border-color: #F05F44;
}

button.btn-primary:hover {
  background-color: #ee4b08;
  border-color: #ee4b08;
  border-width: 4px;
}

/* 覆盖所有交互场景的样式 */
button.btn-primary:focus,
button.btn-primary:focus-visible,
button.btn-primary:active,
button.btn-primary:active:focus {
  background-color: #ee4b08;
  border-color: #ee4b08;
  border-width: 4px;
  /* 清除Bootstrap默认的聚焦外阴影和轮廓 */
  box-shadow: none !important;
  outline: none !important;
}