My goal is to apply Bootstrap 4 form styling, like form-control and custom-select, to actual links (dropdown a tag).
For example:
<select class="custom-select" onchange="location = this.value;">
<option selected>Choose a website</option>
<option value="google.com">google</option>
<option value="apple.com">apple</option>
<option value="amazon.com">amazon</option>
</select>
The styling is perfect and works as intended, but the links are not actual links. What I really want is for them to be actual links with the select styling, using anchor tags:
<select class="custom-select"> # or class = form-control
<a href>Choose a website</a> # same styling as options but actual links
<a href="google.com">google</a>
<a href="apple.com">apple</a>
<a href="amazon.com">amazon</a>
</select>
I have found a way to do it, but it lags the page and is not as clean. Here's how I did it:
<div>
<a href="#ChooseWeb" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle form-control">Choose a website</a>
<style>
.form-control{
height: auto;
}
</style>
<ul class="collapse list-unstyled form-control" id="ChooseWeb">
<li>
<a href="#">google</a>
</li>
<li>
<a href="#">neflix</a>
</li>
<li>
<a href="#">apple</a>
</li>
<li>
<a href="#">amazon</a>
</li>
</ul>
</div>
What is the most efficient and cleanest way to achieve this?