0

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.

Boton incativo: introducir la descripción de la imagen aquí Boton activo: introducir la descripción de la imagen aquí

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.

5
  • Se que tiene que ver cuando el botón(acordeón) esta activo pero no pude darle solución
    – Guayavas
    Commented el 11 nov. 2021 a las 17:40
  • Que versión de bootstrap estas usando. Commented el 11 nov. 2021 a las 20:19
  • Eso no tiene que ver con Bootstrap ni tu código CSS, ese borde que mencionas lo añade cada navegador por defecto y puede cambiar según sea el caso. Podrías intentar *: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 Commented el 12 nov. 2021 a las 22:03
  • @AndresLinares perdón ya arregle la pregunta
    – Guayavas
    Commented el 13 nov. 2021 a las 23:41
  • @JheymanMejia no eso lo añade por defecto boostrap revise el codigo de sass y ahi estaba igual ya supe como quitarlo jajajaja era un box shadow
    – Guayavas
    Commented el 13 nov. 2021 a las 23:45

1 respuesta 1

1

Para eliminar el margen tuve que añadir la siguientes líneas de código(en el archivo de estilo de sass que estaba utilizando para esta clase, no el de boostrap que maneja todos los acordeones), en vez de none pueden colocar el color que gusten.

.accordion-button:is(.collapsed)::after {
        box-shadow: none;   
    }
.accordion-button:not(.collapsed)::after {
        box-shadow: none;   
    }

no utilice "focus" ya que solo servía para cuando se le daba click y se expandía; "aclaro que esto solo sirve para quitar el margen(box-shadow) que se genera automáticamente al utilizar botones de boostrap, si quieren cambiar el color de fondo cuando el acordeón se expande tienen que añadir la linea de background-color(dentro de las llaves "{}") en la parte de cuando se expande el acordeónis(.colapsed) ya que el color de este se altera cuando se expande por defecto a un azul claro.

por ultimo si quisieran cambiar el color de la fleca que aparece al lado del acordeon tiene que hacer lo siguiente:

//en donde esta esta linea: (AQUICOLOCAELCOLOR) tienen que colocar el color en haxadecimal sin el #
 .accordion-button:is(.collapsed)::after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23AQUICOLOCAELCOLOR'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;    
    }
//ejemplo de como colocar en color blanco la flecha
    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;    
    }

tienen que colocar este linea tanto cuando abre como cuando cierra para que no vuelva al color original en estas interacciones.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.