Búsqueda de sitios web

html - ¿Cómo dar color de borde a los campos de entrada del paquete ng-otp-input en Angular?


Estoy usando el paquete ng-otp-input y quiero cambiar el color del borde del campo de entrada a rojo cuando están enfocados.
Enlace de referencia del paquete https://github.com/code-farmz/ng-otp-input
A continuación está mi código
HTML

     <ng-otp-input (onInputChange)="pinModelChange('otp',$event)" [config]="otpConfig"
                ></ng-otp-input>

TYPESCRIPT

 otpConfig :NgOtpInputConfig = {
    allowNumbersOnly: true,
    length: 6,
    isPasswordInput: false,
    disableAutoFocus: false,
    placeholder: '',
    inputStyles:{
      'display':'flex'
    },
    containerStyles:{
      'display':'flex'
    },
    inputClass:'each_input',
    containerClass:'all_inputs'
  };

CSS

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

No puedo eliminar el borde negro sólido cuando el campo de entrada está en estado enfocado

Respuesta #1

intentar

.each_input:focus {
    outline-style: solid;
    outline-color: red;
}

Respuesta #2

Necesitas usar ng-deep si quieres sobrescribir cualquier SCSS/CSS de cualquier biblioteca de terceros.

Aquí está el ejemplo funcional.

::ng-deep .each_input:focus{
  border: 2px solid red!important;
}