Currently, I am noticing that styling options for a <select> with <option> are quite limited. To overcome this, I am exploring the idea of implementing a bootstrap menu, which offers a wider range of styling possibilities. Here is the basic structure I have in mind:
<style>
.menuBox {
width: 200px;
}
.lightBlueBackground {
background-color: aqua;
}
.darkBlueBackground {
background-color: blue
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle border border-dark menuBox" href="#" id="navbarDropdown" role=&"button" data-toggle="dropdown" aria-expanded="false">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item width background-color" href="#" id="aValue">Aaaaaaaaaaaaaa</a>
<a class="dropdown-item width background-color" href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
</div>
</li>
</ul>
</div>
</nav>
<script>
$(document).ready(function () {
$('#aValue').click(function () {
console.log('A');
$('#navbarDropdown').text("Aaaaaaaaaaaaaa");
})
$('#bValue').click(function () {
console.log('B');
$('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
})
});
</script>
While in a <select> element, the down arrow is typically positioned to the right. In the navbar setup, the down arrow appears immediately to the right of the text within the
<a class="nav-link dropdown-toggle>My goal is to have the box that normally displays the menu item text remain blank, with the down arrow anchored to the far right. The text should be dynamically filled based on the user's dropdown selection.
Any guidance on how to position the down arrow to the right side of the <a> element would be greatly appreciated.
Thank you in advance for your assistance.