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;
}
