Get rid of the Border on Bootstrap 5 Accordion Button

Upon inspecting the Bootstrap 5 accordion, I noticed an outline that I would like to remove. I believe the element responsible for this outline may be the button. Despite attempting to target all possible elements with the following code:

.accordion-item, .accordion-item:focus, .accordion-item:active,
.accordion-header, .accordion-header:focus, .accordion-header:active,
.accordion-button, .accordion-button:focus, .accordion-button:active {
  outline: none !important;
}

Unfortunately, none of these attempts seem to be effective. Do you have any suggestions on how to remove this outline?

Here is the HTML code snippet for reference:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        ...
      </div>
    </div>
  </div>
</div>
csstwitter-bootstrapbootstrap-5

Answer №1

If you want to eliminate the shadow and blue border color...

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

See the demo here

Answer №2

Here is a helpful tip for styling your accordion buttons:

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

Answer №3

This is the solution:

.accordion-item {
  border: none;
}

Answer №4

After some tinkering, I successfully eliminated it. The 'item' class belongs to me, as it is a custom class that I created.

.accordion .item .accordion-header button{
    background-color: transparent;
    box-shadow: none;
}

.accordion .item{
    border: 0;
}
<Accordion className="p-0"  alwaysOpen>
            <Accordion.Item eventKey="0" className="item">
              <Accordion.Header>Recent</Accordion.Header>
              <Accordion.Body className="d-flex flex-column">
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
              </Accordion.Body>
            </Accordion.Item>
            <Accordion.Item eventKey="1" className="item">
              <Accordion.Header>Groups</Accordion.Header>
              <Accordion.Body className="d-flex flex-column">
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
              </Accordion.Body>
            </Accordion.Item>
          </Accordion>

Answer №5

Here is the code snippet that will change the color to white for both collapse and non-collapse icons, as well as modify the default border color:

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}
.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath 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'/%3e%3c/svg%3e");
}

.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath 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'/%3e%3c/svg%3e");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display 2 more rows every time the button is clicked

I really enjoy using Google Images, and I'm working on creating a search results page similar to theirs. With Bootstrap 3, my goal is to display only the first two rows of an image gallery initially. Below the gallery, there will be an "Additional Ima ...

jquerytwitter-bootstrap

Remove a specific line from a PHP script

I have developed a system of alerts that allows users to delete an alert if they choose to do so. Below is the code for the delete button and table: <button type="button" name="Delete" Onclick="if(confirm('Are you sure you ...

phpjquerycssajaxhtml-table

Weird Chrome behaviors with CSS3 animations

I have been working on a CSS3 animation that involves rotating a div with an image in the background. My goal is to have the same animation play at a different speed when the user hovers over the element. Here is the code snippet I have been using: .roc ...

htmlcsscss-animations

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...

cssresponsive-designbootstrap-4

Unusual thin border of white pixels on IE 9

Having some issues with border radius in IE-9. The left border is showing white pixels. Any thoughts on why? This problem is only in IE 9, other browsers look fine. Here is the code snippet: <ul class="tags clearfix"> ...

htmlcssinternet-explorer

Switch up the placement of articles, going back and forth between left

On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...

htmlcss

Toggling javascript functionality based on media queries

On one of my slides, I want to display images that are specific to different devices like iPhone, iPad, and desktop. I am looking for a way to filter these images based on the device. Using display:none won't work as it's JavaScript, but here is ...

javascripthtmlcss

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

What strategies can I employ with flexbox to achieve my design goals?

How can I achieve my design requirements using flexbox? design requirements The current code that I have implemented follows the flexbox approach to meet the design requirements. However, the output of this code does not match the screenshot of my design ...

htmlcssflexboxcss-grid

Using Jquery Simplyscroll to incorporate images on both the left and right side within a container or clip

I am currently utilizing Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/) and I am seeking a way to incorporate a faded png image on both the left and right sides to prevent my images from appearing "cut off" while sliding through. Below is ...

jquerycss

the drawer conceals the paper

I am having an issue with my drawer overlapping the content on the page. I would like it to be aligned to the left without covering any other elements. This is my first time working with material-ui, so if anyone could help explain how to fix this, I wou ...

cssreactjsmaterial-ui

Issue with modal rendering in Bootstrap4 when the body is zoomed in

I am encountering an issue with a Bootstrap html page where the body is zoomed in at 90%. The Bootstrap modal is displaying extra spaces on the right and bottom. To showcase this problem, I have created a simple html page with the modal and body set to 90% ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Tips for tackling drag and drop functionality with only HTML, CSS, and JavaScript

Currently, I am faced with a challenge involving drag and drop TEST. Observing the image provided below, you will notice 3 columns each containing 3 small boxes of varying colors. These boxes are draggable, meaning they can be moved between columns follow ...

javascripthtmlcss

What could be causing the Quasar drawer to overlap the Quasar toolbar in a Vue application?

I am currently utilizing the quasar UI framework and have a main layout file that includes only a toolbar. This toolbar is meant to display across all pages in my application. <template> <q-layout view="hHh Lpr lff" style="backgro ...

javascripthtmlcssvue.jsquasar-framework

Troubleshooting a problem with placeholder styling on Internet Explorer

Encountering a challenge while styling placeholders, particularly in Internet Explorer where the placeholder text color does not change as expected. Instead, it inherits the color of the input field. :-ms-input-placeholder { color: white; } input ...

cssinternet-explorer

Unable to be implemented using inline-block styling

I'm struggling to get these 2 elements to display side by side using inline-block, I've tried everything but nothing seems to work. Goal: https://i.sstatic.net/3JfGC.png First element https://i.sstatic.net/GVq91.png https://i.sstatic.net/BIG0D ...

htmlcsstwitter-bootstrapvue.js

What is the best way to conceal a bootstrap directive tooltip in Vue.js for mobile users?

Currently, I'm tackling a project with Vuejs and Laravel. There's a tooltip directive incorporated that relies on Bootstrap's functionality. Check it out below: window.Vue.directive("tooltip", function(el, binding) { // console ...

javascripthtmlcssvue.js

Column count pseudo class is malfunctioning on Safari browser

Why is the pseudo class with column count not working in the Safari browser? I have captured two screenshots to illustrate this issue. 1. Firefox browser screenshot https://i.sstatic.net/27uoI.png 2. Safari browser screenshot https://i.sstatic.net/vRN ...

htmlcssbrowsersafaricolumn-count

Eliminating the border of a table that is contained within a cell

I am facing an issue with a nested table where I need to remove the borders from specific cells (around A and B). Here is the code snippet: <style> .withBorders tr td{ border: 1px solid black !important ; } .withBorders table. ...

cssborderparent-child