vue + vite + ts element-plus ElMessageBox 如何去掉 确认按钮的蓝色的border
时间: 2025-01-23 11:14:50 浏览: 72
在 Vue 项目中,结合 Vite 和 TypeScript 使用 Element Plus 的 `ElMessageBox` 组件时,如果你想去除默认确认按钮的蓝色边框,可以通过 CSS 自定义样式来实现。首先,你需要在项目的全局 CSS 或者主题文件 (`theme-chalk.js` 或其他自定义主题文件) 中添加一条规则,针对 `.el-message-box__confirm button` 类选择器。
例如:
```css
.el-message-box__confirm button {
border-color: transparent; /* 去除边框颜色 */
}
```
或者如果你想要更精确地控制圆角和边距,可以这样写:
```css
.el-message-box__confirm button {
border: none; /* 去除所有边框 */
background-color: transparent;
outline: none; /* 防止按钮有默认轮廓 */
cursor: pointer; /* 保持正常点击效果 */
padding: 0; /* 可选,移除内边距 */
box-shadow: none; /* 可选,移除阴影 */
/* 如果需要保持圆角,可以保留该属性并设置合适的值 */
border-radius: inherit; /* 或者 .your-desired-border-radius; */
}
```
记得将上述代码添加到你的 CSS 文件之后,应用这些样式才会生效。如果在组件级希望仅限某一处去除边框,可以在相应的组件模板里引用这个类,并覆盖它。
阅读全文
相关推荐


















