如何隐藏Bootstrap 5.3.0 Alpha3下拉按钮的箭头图标

我正在学习HTML与Bootstrap 5.3.0 Alpha3，开发页面时遇到Dropdown组件的问题：使用搜索图标作为下拉按钮时，按钮旁会显示一个指示下拉方向的三角形箭头，我希望将该箭头设为透明隐藏（仅隐藏箭头，保留搜索图标），但尝试调整CSS样式后仍未成功。

我的HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LIAV | Home</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand ms-5" href="home.html">
                    <img src="logo.png" alt="LIAV logo" height="50">
                </a>
        
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
        
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item"><a class="nav-link" href="men.html">Men</a></li>
                        <li class="nav-item"><a class="nav-link" href="women.html">Women</a></li>
                    </ul>
        
                    <ul class="navbar-nav ms-auto me-5">
                        <div class="dropstart">
                            <button class="btn btn-outline dropdown-toggle dropdown-toggle-transparent" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-search"></i></button>

                            <ul class="dropdown-menu">
                                <li>
                                    <form class="d-flex me-auto">
                                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                                    </form>
                                </li>
                            </ul>
                        </div>
                        
                        <li class="nav-item"><a class="nav-link" href="favorites.html"><i class="fa fa-star"></i></a></li>
                        <li class="nav-item"><a class="nav-link" href="user.html"><i class="fa fa-user"></i></a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <main>
            
        </main>

        <footer class="bg-light py-3">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h5 class="mb-3">LIAV</h5>
                        <p class="text-muted">We are a clothing brand that is dedicated to offering high quality products and innovative design.
                            We are passionate about fashion and we want to share this passion with you.</p></div>
                    <div class="col-md-3">
                        <h5 class="mb-3">Quick Links</h5>
                        <ul class="list-unstyled text-decoration-none">
                            <li class="nav-item"><a class="nav-link" href="home.html">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="men.html">Men</a></li>
                            <li class="nav-item"><a class="nav-link" href="women.html">Women</a></li>
                            <li class="nav-item"><a class="nav-link" href="favorites.html">Favorites</a></li>
                            <li class="nav-item"><a class="nav-link" href="user.html">User</a></li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <h5 class="mb-3">Contact Us</h5>
                        <ul class="list-unstyled text-decoration-none">
                            <li class="nav-item"><a class="nav-link" href="https://www.facebook.com/profile.php?id=100090624952494" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a></li>
                            <li class="nav-item"><a class="nav-link" href="https://www.instagram.com/liavclothes/" target="_blank"><i class="fab fa-instagram"></i> Instagram</a></li>
                            <li class="nav-item"><a class="nav-link" href="https://api.whatsapp.com/send?phone=573215663993" target="_blank"><i class="fab fa-whatsapp"></i> Whatsapp</a></li>
                            <li class="nav-item"><a class="nav-link" href="mailto:liavclothes@outlook.com" target="_blank"><i class="fa fa-envelope"></i> Email</a></li>
                        </ul>
                    </div>
                    <div class="col-12 text-center mt-3">
                        <p class="text-muted mb-0">© 2023 LIAV - All rights reserved.</p>
                    </div>
                </div>
            </div>
        </footer>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

我的CSS代码 #

.btn-outline {
    border-color: transparent;
    padding: 8px;
    color: #585454;
}

.btn-outline:hover {
    background-color: transparent;
    border-color: transparent;
    color: #383434;
}

.form-control {
    background-color: transparent;
    border-color: #585454;
    border-radius: 20px;
}

.dropdown-toggle {
    background-color: transparent;
}

.dropdown-menu {
    top: 50% !important;
    transform: translateY(-50%);
    background-color: transparent;
    border-color: transparent;
}

.dropdown-toggle-transparent {
    border-color: transparent;
}

解决方案 #

Bootstrap的下拉按钮箭头是通过伪元素生成的，你之前的CSS没有针对这个伪元素设置样式，所以无法隐藏箭头。针对你使用的dropstart容器，箭头是通过::before伪元素实现的，添加以下CSS即可隐藏：

.dropstart .dropdown-toggle::before {
    display: none;
}

如果你想通过自定义的dropdown-toggle-transparent类来定位，也可以用：

.dropdown-toggle-transparent::before {
    display: none;
}

这样就能只隐藏箭头，保留搜索图标。

内容的提问来源于stack exchange，提问作者XNeyMo