I am developing a page to deepen my knowledge of HTML and Bootstrap, in this case I am using Bootstrap version 5.3.0 Alpha 3 and I have a problem with the Dropdown, as is well known, when the Dropdown is used in an element , either an icon or a text, a type of arrow is marked on it, which is like a triangle indicating the direction in which the Dropdown opens, well, what I want to do is make said arrow transparent, I don't want it to appear.
My HTML code is:
<!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="botton" 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>
And the CSS file I have embedded is:
.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;
}
I have tried changing the styles and determining each element, but even so I have not been able to, I have used Bootstrap in HTML and I have even declared features in the CSS but still I have not been able to make the date transparent, I want only the arrow to be transparent , not the search icon
This is what I'm talking about, I want the arrow not to appear, that is, to have a transparent color
