html - 用响应式模板中的文本框替换下拉菜单

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