为什么按钮上显示向下箭头？

Question

我正在尝试创建一个带有 x 轴、y 轴并显示图形的可折叠组件，x 轴和 y 轴是下拉列表，显示图形是按钮。问题是按钮上显示向下箭头，我该如何解决这个问题？？。

以下是代码

HTML：

<div class="ctc_visual_analysis_row">
   <div id="accordion6" style="margin-top: 10px;">
      <div class="card mb-2" style="box-shadow: none; border: 1px solid #f2f2f2;">
         <div class="card-header" style="padding: 0px; border-bottom: 0px; background-color: #f2f2f2;">
            <button class="btn btn-link text-white shadow-none" style="color: #000 !important"
               data-toggle="collapse" data-target="#collapse-6" aria-expanded="true"
               aria-controls="collapse-6">
            Visual Analysis
            </button>
            <div id="collapse-6" class="collapse" data-parent="#accordion6" style="background-color:white;">
               <div class="card-body">
                  <div style="text-align: center; color: green; margin-bottom: 12px; font-weight: 900;">
                     <span id="ctc_vis_loading_text">Loading ....</span>
                  </div>
                  <table border="0px" style="width: 100%;">
                     <tr style="font-weight: 600; font-size: 12px;">
                        <td>X Axis</td>
                        <td>Y Axis</td>
                        <td>Split Data(Optional)</td>
                     </tr>
                     <tr>
                        <td>
                           <select class="form-control csm_xaxis">
                              <option value="0">Please Select</option>
                           </select>
                        </td>
                        <td>
                           <select class="form-control csm_yaxis">
                              <option value="0">Please Select</option>
                           </select>
                        </td>
                        <td>
                           <select class="form-control csm_splitdata">
                              <option value="0">Please Select</option>
                           </select>
                        </td>
                        <td>
                           <button type="button" class="btn btn--dark csm_show_graph">Show Graph</button>
                        </td>
                     </tr>
                  </table>
                  <br>
                  <div id="csm_graph"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

CSS：

#accordion6 .card-header button.collapsed:before
{
    content:"\f105";
}
#accordion6 .card-header button:before
{
    float: left !important;
    font-family: FontAwesome;
    content:"\f107";
    padding-right: 15px;
}

问题：

我该如何解决这个问题？请指教。

谢谢，

Answer 1

仅目标展开状态：

将 CSS 更改为仅在按钮展开时（即显示折叠时）定位该按钮。您可以通过修改选择器以定位未折叠的按钮来实现此目的：

CSS
#accordion6 .card-header button:not(.collapsed):before {
    content: "\f107"; /* Your icon for expanded state */
    float: left !important;
    font-family: FontAwesome;
    padding-right: 15px;
}

此代码仅在按钮没有“collapsed”类时应用图标样式，这意味着折叠当前已展开。

删除向下箭头图标：

如果您不希望按钮上有任何图标，只需删除在状态之前设置按钮内容的 CSS 规则即可：

CSS
#accordion6 .card-header button:before {
    /* Remove this line */
}

这将删除按钮上显示的所有图标。

考虑定制样式：

您可以使用 CSS 伪元素（例如：after）创建自定义三角形，并根据您的喜好设置其样式，而不是依赖 FontAwesome 箭头。这使您可以更好地控制外观并消除对外部库的依赖。