¿Cómo depurar el estilo que se supone que se aplica pero no es visible en la página?

He estado intentando aplicar algunos estilos para un campo de entrada de formulario y estoy un poco confundido.

He estado intentando aplicar los estilos siguientes a mi campo de entrada de formulario y se muestra en Google Devtools como se esperaba, sin embargo, no aparece ningún estilo en la página.

Ya he intentado:
1. aplicar los estilos utilizando una clase o el identificador ‘selectedFile’ para aumentar la especificidad.
2. aplicar los mismos estilos utilizando el enfoque o simplemente para mostrarlo de forma normal y no aparece ningún estilo, pero siempre aparece en devTools diciendo que se aplica.
3. Añadir un z-index alto (no es bonito, pero en teoría lo llevaría al frente de la página si los estilos se aplican detrás de otros elementos de la página) – sin éxito.
4. Eliminar completamente el desplazamiento del esquema, establecerlo con un número negativo (para mostrarlo dentro del cuadro) y con un número positivo (para mostrarlo fuera del cuadro) y sin éxito con ninguno.

¿Alguna idea de lo que me estoy perdiendo???

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

input[type="file"]:focus-visible {
    z-index: 9999999 !important;
    outline-style: solid !important;
    outline-width: 4px !important;
    outline-color: blue !important;
    outline-offset: -4px !important;
}

<!-- language: lang-html -->

<div class="col-12 col-lg-6">
  <div class="input-group mb-3">
    <div class="custom-file">
      <input type="file" class="custom-file-input pointer" id="selectedFile" (change)="fileChange($event)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
      <label class="custom-file-label" for="selectedFile">{{selectedFileName | async}}</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-primary" type="button" (click)="uploadFile()">Upload</button>
    </div>
  </div>
</div>

<!-- end snippet -->