Quiero cambiar el color de la sombra o marco que se hace cuando le doy click a un acordeón en bostrap 5(estoy utilizando la version para react https://react-bootstrap.github.io/getting-started/introduction) , todo el ese color azul.
Como pueden ver cuando esta activo todo se pinta de azul y quiero cambiarlo a un verde
Mi codigo para el acordeon este(estoy trabajando en React):
<Accordion>
<Accordion.Item eventKey="0">
<Accordion.Header>Volcanes</Accordion.Header>
<Accordion.Body>
*Algo aqui*
</Accordion.Body>
</Accordion.Item>
<Accordion>
El codigo del estylo es(estoy trabajando con sass):
.accordion-button {
background-color: #adadad;
height: 30px;
color: white;
}
.accordion-body{
padding: 8px 12px;
background-color: rgb(172, 172, 172);
}
E buscado información pero sinceramente no e podido aplicar ninguna solución, ya que me piden que lo haga sin usar ningún jQuery.
*:focus {outline:none}
, pero personalmente no recomiendo que lo quites por temas de accesibilidad, luego te van a penalizar en auditorías SEO como la que hace Lighthouse