Clase CSS del cuadro combinado enfocado

Contribuir UX
1

Rara vez me pierdo en el CSS de Discourse, pero no consigo encontrar la clase CSS de este borde, el azul del menú desplegable de categorías:

image

Creo que es una línea border: 1px solid $tertiary; y proviene de este archivo: discourse/app/assets/stylesheets/common/select-kit/combo-box.scss at 0431942f3de7c2970ea160fc671b2a5874517c37 · discourse/discourse · GitHub

Pero he intentado cambiar todas las líneas con border y sigo teniendo este borde azul en mi foro de prueba.

Me gustaría cambiar el color o eliminar el borde al hacer foco.

.select-kit {
  &.combo-box {
    .select-kit-header {
      &.is-focused {
        border: 0;
      }
    }
    
    &.is-highlighted {
      .select-kit-header {
        border: 0;
      }
    }

    &.is-expanded {
      .select-kit-wrapper {
        border: 0;
      }
    }
  }
}

o algo así

.select-kit.combo-box .select-kit-header.is-focused {
    border: 0 !important;
}

Pero nada parece funcionar para mí.

¿Alguna persona experta en CSS tendrá la solución? Gracias :pray:

2 Me gusta
2

¿No es el destacado del navegador?

4 Me gusta
3

Esto parece correcto

image
image855×191 19 KB

pero creo que puedes eliminarlo con

class-name:focus {
   outline: none;
}

o quizás necesites agregar un !important, pero es el outline el que necesitas definir, no el border.

5 Me gusta
4

¡Gracias!

Ahora entiendo por qué solo apareció en Chrome.

¡Lo arreglé!

3 Me gusta