如何移除PrimeNG组件选中时的高亮边框颜色

PrimeNG组件的点击高亮边框（:focus状态效果）并非默认outline属性实现，而是通过box-shadow或自定义伪类样式控制，所以直接使用outline:none无法生效，可通过以下方法解决：

全局移除所有p-component的高亮效果 #

在项目全局样式文件（如styles.scss）中添加以下代码：

.p-component:focus {
  box-shadow: none !important;
  outline: none !important;
}

注：!important用于覆盖PrimeNG自带的高优先级样式，若你的选择器优先级足够（比如结合父元素类名），也可省略该声明。

针对特定组件移除高亮 #

若无需全局移除，可单独针对目标组件设置：

• 按钮组件：

.p-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

• 输入框组件：

.p-inputtext:focus {
  box-shadow: none !important;
  outline: none !important;
}

自定义排查方案 #

若以上代码未生效，可通过浏览器开发者工具（F12）选中目标组件，查看:focus状态下的实际生效样式，确认控制高亮的具体属性（如border-color等），再针对性编写覆盖样式。

内容的提问来源于stack exchange，提问作者Rishab Aggarwal