将下拉菜单替换为响应式模板中的文本框

Question

我想用搜索表单中的文本框替换下拉菜单。 文本框的大小必须与替换的下拉菜单大小相同。

表格代码：

<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>

风格：

.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;
}

无论如何，这里有模板的链接：

https://demo.themeregion.com/jobs-updated/

也许这是一个微不足道的问题，但我是 css 技术的新手，因为我是一名后端开发人员。

Answer 1

一个简单的方法是这样，代替<div class="dropdown category-dropdown">：

<input type="text" class="form-control category-textbox" placeholder="Type your key word">

风格：

.category-textbox{
width: 20%;
min-width: 20%;
}