gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:01:13 25 4
gpt4 key购买 nike

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

表单代码:

    <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 技术是个新手。

最佳答案

一个简单的方法是这样的,代替<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%;
}

关于html - 用响应式模板中的文本框替换下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52020599/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com