如何为Angular的ng-otp-input组件输入框设置聚焦边框颜色

问题原因 #

Angular组件默认启用样式隔离机制，外部组件的CSS无法穿透到ng-otp-input内部的输入元素；同时组件内部自带的聚焦状态边框/轮廓样式优先级高于自定义样式，导致自定义样式无法生效。

解决方案 #

通过::ng-deep穿透样式隔离，同时提高自定义样式优先级，覆盖默认样式：

修改组件内CSS代码 #

:host ::ng-deep .each_input:focus {
  border: 2px solid red !important;
  outline: none !important; /* 移除默认的聚焦轮廓（部分场景下默认黑色边框实际是outline而非border） */
}

替代方案（全局样式） #

如果不想使用::ng-deep，可以将样式写在项目根目录的styles.css（或styles.scss）中：

.each_input:focus {
  border: 2px solid red !important;
  outline: none !important;
}

说明 #

• :host 确保样式仅作用于当前组件内的ng-otp-input元素，避免全局样式污染
• ::ng-deep 用于突破Angular的样式隔离限制，让自定义样式能作用到组件内部的DOM元素
• 若默认聚焦样式是outline而非border，添加outline: none !important可彻底移除默认黑色边框效果

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