Question 43703 in Html Question posted in
Some basic documentation can be found here.

how to remove the blue color from boostrap 5.3 accordion item when open? – Html

Like you can see on those 2 pictures i want to delete the blue color when open and the blue border color
enter image description here
enter image description here

                              <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-heading<?php echo $id; ?>">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse<?php echo $id; ?>" aria-expanded="false" aria-controls="flush-collapse<?php echo $id; ?>">
                                    <?php echo $row["question"]; ?>
                                </button>
                                </h2>
                                <div id="flush-collapse<?php echo $id; ?>" class="accordion-collapse collapse" aria-labelledby="flush-heading<?php echo $id; ?>" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body"><?php echo $row["reponse"]; ?></div>
                                    </div>
                                </div>

thank you for your help, stef

i try few things in the css but non of them work

Tags:

2

Answers


  1. 0

    you can modify the CSS for the .accordion-button:not(.collapsed) selector. This selector is used by Bootstrap to style the button when the accordion item is open

    .accordion-button:not(.collapsed) {
      background-color: transparent !important;
      color: inherit;
    }

button.accordion-button:focus{
      box-shadow: inherit;
}
    Login or Signup to reply.
  2. 0

    Try this css

    button.accordion-button:focus{
      box-shadow: none;
      outline: none; 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search