Is it possible to switch out a Dropdown Menu with a text box in a search form? The textbox needs to match the size of the Dropdown Menu being replaced.
Here is the code for the form:
<form action="#">
<input type="text" class="form-control" placeholder="Type your key word">
<div class="dropdown category-dropdown">
<a data-toggle="dropdown" href="#"><span class="change-text">Job Location</span> <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu category-change">
<li><a href="#">Location 1</a></li>
<li><a href="#">Location 2</a></li>
<li><a href="#">Location 3</a></li>
</ul>
</div><!-- category-change -->
<button type="submit" class="btn btn-primary" value="Search">Search</button>
</form>
Regarding the style:
.category-dropdown {
background-color: #fff;
border-right: 1px solid #e6e6e6;
border-radius: 5px 0px 0px 5px;
min-width: 200px;
line-height: 45px;
text-align: left;
padding: 0 20px;
}
If you'd like to preview the template, you can access it via this link:
This may seem like a simple question, but as someone new to CSS and more familiar with backend development, any guidance would be appreciated.