Hướng dẫn bootstrap accordion remove outline - bootstrap accordion loại bỏ phác thảo

Khi bạn kiểm tra bootstrap 5 accordion, bạn sẽ thấy một phác thảo. Tôi muốn loại bỏ nó. Tôi không chắc yếu tố nào thực sự tạo ra phác thảo, nhưng tôi nghi ngờ đó là button. Trong mọi trường hợp, tôi đã cố gắng áp dụng những điều sau đây cho tất cả các yếu tố có thể:

.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;
}

Dường như không có gì để làm việc. Bất kỳ ý tưởng?

Dưới đây là bản sao của mã HTML:

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

Nội dung giữ chỗ cho accordion này, nhằm chứng minh lớp

Accordion Item #1

...

2. Đây là cơ quan accordion của vật phẩm thứ ba. Không có gì thú vị hơn xảy ra ở đây về nội dung, nhưng chỉ cần lấp đầy không gian để làm cho nó trông, ít nhất là ngay từ cái nhìn đầu tiên, một đại diện hơn một chút về cách thức này trông như thế nào trong một ứng dụng trong thế giới thực.

Luôn luôn mở

Bỏ qua thuộc tính

Accordion Item #1

...

7 trên mỗi

Accordion Item #1

...

8 để thực hiện các mục accordion vẫn mở khi một mục khác được mở.

Đây là cơ quan accordion của vật phẩm đầu tiên. Nó được hiển thị theo mặc định, cho đến khi plugin sụp đổ thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát ngoại hình tổng thể, cũng như hiển thị và ẩn qua các chuyển đổi CSS. Bạn có thể sửa đổi bất kỳ điều này với CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng đáng chú ý là bất kỳ HTML nào cũng có thể đi trong .accordion-body, mặc dù quá trình chuyển đổi không giới hạn tràn.

Đây là cơ quan accordion của vật phẩm đầu tiên. Nó được hiển thị theo mặc định, cho đến khi plugin sụp đổ thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát ngoại hình tổng thể, cũng như hiển thị và ẩn qua các chuyển đổi CSS. Bạn có thể sửa đổi bất kỳ điều này với CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng đáng chú ý là bất kỳ HTML nào cũng có thể đi trong .accordion-body, mặc dù quá trình chuyển đổi không giới hạn tràn. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Đây là cơ thể accordion của vật phẩm thứ hai. Nó được ẩn theo mặc định, cho đến khi plugin sụp đổ thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát ngoại hình tổng thể, cũng như hiển thị và ẩn qua các chuyển đổi CSS. Bạn có thể sửa đổi bất kỳ điều này với CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng đáng chú ý là bất kỳ HTML nào cũng có thể đi trong .accordion-body, mặc dù quá trình chuyển đổi không giới hạn tràn. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Đây là cơ quan accordion của vật phẩm thứ ba. Nó được ẩn theo mặc định, cho đến khi plugin sụp đổ thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát ngoại hình tổng thể, cũng như hiển thị và ẩn qua các chuyển đổi CSS. Bạn có thể sửa đổi bất kỳ điều này với CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng đáng chú ý là bất kỳ HTML nào cũng có thể đi trong .accordion-body, mặc dù quá trình chuyển đổi không giới hạn tràn. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

<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">
        <strong>This is the first item's accordion body.strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>
    div>
  div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      button>
    h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>
    div>
  div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      button>
    h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>
    div>
  div>
div>

Tuôn ra

Thêm

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

2 để loại bỏ mặc định

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

3, một số đường viền và một số góc tròn để hiển thị các cạnh tranh với container cha mẹ của chúng.

Nội dung giữ chỗ cho accordion này, nhằm chứng minh lớp

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

2. Đây là cơ quan accordion của vật phẩm đầu tiên.

Nội dung giữ chỗ cho accordion này, nhằm chứng minh lớp

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

2. Đây là cơ thể accordion của vật phẩm thứ hai. Hãy tưởng tượng điều này được lấp đầy với một số nội dung thực tế.

Nội dung giữ chỗ cho accordion này, nhằm chứng minh lớp

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

2. Đây là cơ quan accordion của vật phẩm thứ ba. Không có gì thú vị hơn xảy ra ở đây về nội dung, nhưng chỉ cần lấp đầy không gian để làm cho nó trông, ít nhất là ngay từ cái nhìn đầu tiên, một đại diện hơn một chút về cách thức này trông như thế nào trong một ứng dụng trong thế giới thực.

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion Item #1
      button>
    h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flushcode> class. This is the first item's accordion body.div>
    div>
  div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion Item #2
      button>
    h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flushcode> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.div>
    div>
  div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Accordion Item #3
      button>
    h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flushcode> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.div>
    div>
  div>
div>

Luôn luôn mở

Bỏ qua thuộc tính

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

7 trên mỗi

  

    

      
        Accordion Item #1
      
    
    

      

        ...
      
    
  

8 để thực hiện các mục accordion vẫn mở khi một mục khác được mở.

Đây là cơ quan accordion của vật phẩm đầu tiên. Nó được hiển thị theo mặc định, cho đến khi plugin sụp đổ thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát ngoại hình tổng thể, cũng như hiển thị và ẩn qua các chuyển đổi CSS. Bạn có thể sửa đổi bất kỳ điều này với CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng đáng chú ý là bất kỳ HTML nào cũng có thể đi trong .accordion-body, mặc dù quá trình chuyển đổi không giới hạn tràn. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Đây là cơ thể accordion của vật phẩm thứ hai. Nó được ẩn theo mặc định, cho đến khi plugin sụp đổ thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát ngoại hình tổng thể, cũng như hiển thị và ẩn qua các chuyển đổi CSS. Bạn có thể sửa đổi bất kỳ điều này với CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng đáng chú ý là bất kỳ HTML nào cũng có thể đi trong .accordion-body, mặc dù quá trình chuyển đổi không giới hạn tràn. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Đây là cơ quan accordion của vật phẩm thứ ba. Nó được ẩn theo mặc định, cho đến khi plugin sụp đổ thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát ngoại hình tổng thể, cũng như hiển thị và ẩn qua các chuyển đổi CSS. Bạn có thể sửa đổi bất kỳ điều này với CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng đáng chú ý là bất kỳ HTML nào cũng có thể đi trong .accordion-body, mặc dù quá trình chuyển đổi không giới hạn tràn. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      button>
    h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>
    div>
  div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      button>
    h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>
    div>
  div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      button>
    h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>
    div>
  div>
div>

Khả năng tiếp cận

Vui lòng đọc phần tiếp cận sụp đổ để biết thêm thông tin.

Sass

Biến

$accordion-padding-y:                     1rem;
$accordion-padding-x:                     1.25rem;
$accordion-color:                         $body-color;
$accordion-bg:                            $body-bg;
$accordion-border-width:                  $border-width;
$accordion-border-color:                  rgba($black, .125);
$accordion-border-radius:                 $border-radius;
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);

$accordion-body-padding-y:                $accordion-padding-y;
$accordion-body-padding-x:                $accordion-padding-x;

$accordion-button-padding-y:              $accordion-padding-y;
$accordion-button-padding-x:              $accordion-padding-x;
$accordion-button-color:                  $accordion-color;
$accordion-button-bg:                     $accordion-bg;
$accordion-transition:                    $btn-transition, border-radius .15s ease;
$accordion-button-active-bg:              tint-color($component-active-bg, 90%);
$accordion-button-active-color:           shade-color($primary, 10%);

$accordion-button-focus-border-color:     $input-focus-border-color;
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;

$accordion-icon-width:                    1.25rem;
$accordion-icon-color:                    $accordion-color;
$accordion-icon-active-color:             $accordion-button-active-color;
$accordion-icon-transition:               transform .2s ease-in-out;
$accordion-icon-transform:                rotate(-180deg);

$accordion-button-icon:         url("data:image/svg+xml,");
$accordion-button-active-icon:  url("data:image/svg+xml,");