如何隐藏SweetAlert2按钮的边框？彻底关闭自动出现的按钮边框

嘿，我来帮你解决这个问题！SweetAlert2的按钮默认带边框，甚至聚焦时还会出现轮廓，想要彻底隐藏的话，可以试试这两种方法：

方法1：全局CSS覆盖（适合所有弹窗按钮） #

SweetAlert2的按钮默认使用.swal2-styled类，我们可以直接通过CSS干掉它的边框和聚焦轮廓：

/* 移除按钮默认边框 */
.swal2-styled {
  border: none !important;
}

/* 移除按钮聚焦时的轮廓（点击后不会再出现边框状的高亮） */
.swal2-styled:focus {
  box-shadow: none !important;
  outline: none !important;
}

如果只想针对确认/取消按钮单独修改，用更具体的类名就行：

/* 仅修改确认按钮 */
.swal2-confirm {
  border: none !important;
}
.swal2-confirm:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* 仅修改取消按钮 */
.swal2-cancel {
  border: none !important;
}
.swal2-cancel:focus {
  box-shadow: none !important;
  outline: none !important;
}

方法2：自定义类（针对单个弹窗） #

如果不想全局修改所有弹窗，你可以在调用弹窗时给按钮指定自定义类，再单独写样式，更灵活：

Swal.fire({
  title: '测试弹窗',
  text: '这个按钮没有边框哦',
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  showCancelButton: true,
  // 给按钮添加自定义类
  customClass: {
    confirmButton: 'no-border-btn',
    cancelButton: 'no-border-btn'
  }
})

对应的CSS：

.no-border-btn {
  border: none !important;
}
.no-border-btn:focus {
  box-shadow: none !important;
  outline: none !important;
}

小提示 #

• !important主要是为了确保我们的样式优先级高于SweetAlert2的默认样式，如果你的CSS是在SweetAlert2样式之后加载的，也可以不用，但加上更保险。
• 聚焦状态的轮廓很容易被忽略，一定要记得处理，不然点击按钮后还是会出现类似边框的高亮效果。

内容的提问来源于stack exchange，提问作者Jacob Feng