有下拉的搜索框

淡淡的烟草味﹌ 2022-05-22 09:35 260阅读 0赞

今天一上就做出来这么个玩意，真的伤。。。

不过总算是做出来，样式勉强能看。有需要的可以参考一下

代码没有提炼 比较乱就是，先看下具体样式吧

![70][]

css ：

html,  
body \{  
padding: 0;  
margin: 0;  
width: 100%;  
height: 100%;  
text-align: center;  
\}  
  
.h-img \{  
width: 100%;  
height: auto;  
text-align: center;  
\}  
  
.h-ss \{  
position: relative;  
top: -40px;  
left: 5%;  
display: flex;/\*弹性布局\*/  
flex-flow: row;/\*单排\*/  
margin: 0;  
padding: 0;  
width: 90%;  
height: 30px;  
text-align: center;  
background-color: \#fff;  
border-radius: 15px;  
overflow: hidden;  
\}  
  
.h-ss .h-qz \{  
padding: 0;  
margin: 0;  
width: 20%;  
height: 30px;  
background-color: red;  
border-radius: 15px 0px 0px 15px;  
\}  
  
.h-ss .h-qz select \{  
padding: 0;  
margin: 0;  
height: 100%;  
width: 100%;  
border-radius: 15px 0px 0px 15px;  
\}  
  
.h-ss .h-inp \{  
width: 60%;  
height: 30px;  
border: 0;  
\}  
  
.h-ss .h-inp input \{  
width: 100%;  
height: 30px;  
font-size: 0.9em;  
border-radius: 0px 0px 0px 0px;  
border: 0;  
\}  
  
.h-ss .h-s-img \{  
width: 20%;  
height: 100%;  
border-radius: 0px 15px 15px 0px;

\}

html ：

<div class="h-img">  
<img src="img/public.png" width="100%" />

<div class="h-ss">

<div class="h-qz">  
<select name="">  
<option value="">全站</option>  
</select>

</div>

<div class="h-inp">  
<input placeholder="输入关键字查找..." name="" id="" value="" />

</div>

<div class="h-s-img">  
<img src="img/qy-ss.png" width="50%" height="100%" />  
</div>  
</div>

</div>

OK！ 有什么问题可以在评论里面问

[70]: /images/20220522/13cf6bf191e44f59ab734d0688d78deb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular 下拉搜索框实现

今天有个需求要写一个下拉搜索框，本来是下拉框的，由于内容太多，所以添加一个查找功能。根据[博客][Link 1]进行改写的。参考了他的基本框架进行实现。效果图： ![

雨点打透心脏的1/2处/ 2022年12月14日 03:58/ 0 赞/ 372 阅读

相关小程序的模糊联想搜索，下拉框选择

![在这里插入图片描述][20200828191907503.gif_pic_center] [github地址 https://github.com/pretty-git

偏执的太偏执、/ 2022年12月02日 00:59/ 0 赞/ 187 阅读

相关搜索下拉框级联

$('\cat\_type').change(function()\{ var id = $(this).children(

左手的ㄟ右手/ 2022年08月10日 16:32/ 0 赞/ 262 阅读

相关带搜索功能的下拉框select

[Chosen][] 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动

柔光的暖阳◎/ 2022年08月01日 13:46/ 0 赞/ 1391 阅读

相关 easyui的combobox，自动搜索的下拉框

如图，输入关键字，左匹配检索 ![Center][] HTML代码 <input class="easyui-combobox" nam

Myth丶恋晨/ 2022年07月14日 06:43/ 0 赞/ 474 阅读

相关带搜索功能的下拉选择框select2

api 地址：[ http://select2.github.io/select2/][http_select2.github.io_select2]

矫情吗；*/ 2022年06月04日 09:58/ 0 赞/ 668 阅读

相关有下拉的搜索框

今天一上就做出来这么个玩意，真的伤。。。不过总算是做出来，样式勉强能看。有需要的可以参考一下代码没有提炼比较乱就是，先看下具体样式吧 ![70][] css

淡淡的烟草味﹌/ 2022年05月22日 09:35/ 0 赞/ 261 阅读

相关 layui的下拉搜索框

html部分通过给select设定属性 lay-search 来开启搜索匹配功能，给select父级layui-form的类名，一定要搭配使用才能显示 <div c

小灰灰/ 2022年03月28日 09:37/ 1 赞/ 1635 阅读

相关 bootstap下拉选择框实现模糊搜索

博主最近在完成公司的一个需求，需要使用到下拉选择框模糊搜索，爬了一次坑，跟大家分享一下，因为使用的是bootstrap的插件，所以也是百度了下如何实现，在这个过程

不念不忘少年蓝@/ 2022年03月07日 05:54/ 0 赞/ 567 阅读

相关下拉框

1.jsp: <select class=" z9" name="sstage" id="sstage"> <c:forEach items="$\{sstagelis

比眉伴天荒/ 2021年11月23日 03:28/ 0 赞/ 463 阅读