input中加入搜索图标

1. HTML代码：

<div class="box"><label for="q" id="q_label">请输入关键字</label><input id="q"  type="text"><i class="am-icon-search search" id="q_i"></i>
</div>

其实结构非常简单，最外层放一个div盒子，里面放三个元素：一个label，一个input，一个i标签。使用for属性将label与input绑定，label用来显示字符串，i标签引入图标，input干好本职工作就行了——提供输入框。我这里是用的amazeUI框架的图标，所以用i标签引入，如果你直接使用图片，用img当然也没有问题。

好了，结构搭好了，下面就是css大显身手的时候了。

2. CSS代码：（布局根据自己需要调整）

/***放置input的div盒子*1.此处应我的项目需要，加了些特别的设置，如字体、背景色等，按需添加；*2.内层input不加边框，看起来效果会自然一点，所以外层div设置了边框和圆角
*/
.box{background-color: #ffffff;border: 1px solid #eeeeee;border-radius: 6px;font-size: 14px;text-align: center;
}/***label标签样式 放在.box下，不至于影响其他的label*采取绝对定位，位置根据需求确定
*/
.box label{z-index: 2;position: absolute;left: 50%;margin-left: -8%;color: #B2B2B2;top: 4.8rem;font-weight: normal;
}/***input标签样式*宽度适应外层div*隐藏边框*这里有个小技巧，height与line-height值相等，可保证文字垂直居中；但我发现文字比图标略偏下，进行了微调；
*/
.box input{text-indent: 10px;height: 1.8rem;line-height: 1.9rem;width: 100%;border: none;outline: none;
}/***图标样式*绝对定位，自定义颜色
*/
.box i{position: absolute;top: 4.8rem;left: 50%;margin-left: -15%;color: #B2B2B2;
}

3. JS代码：

/***  js判断input输入框中是否有值，以此来判断是否隐藏默认提示信息*  使用keyup事件*/
$(function() {$('#q').on('keyup',function() {var len = document.getElementById('q').value; if(len == ''){$('#q_label').show();$('#q_i').show();}else{$('#q_label').hide();$('#q_i').hide();}});
})

效果图如下：

转载于:https://www.cnblogs.com/pyspang/p/9732619.html

input中加入搜索图标相关推荐

bootstrap中如何使input中的小图标获得点击事件
bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...
js中搜索栏中的搜索图标(以及其他各种图标）怎么写？Fontawesome
一.推荐网站可能大家刚写js时,遇到一些需要用的图标,会上网去搜图片,然后ps...其实,有一个很好的网站已经为我们设计好了所有的(几乎你需要用的)所有图标.有很多这样的网站:fontawesome ...
小程序如何在input中的placeholder中加图标
小程序如何在input中的placeholder中加图标方式二可用,方式一不可用, 1.使用mpVue编写小程序代码,首先想到的就是Vue实现的方式, <input :placeholder= ...
Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
电话中删除搜索框内的语音图标按钮。所有应用菜单上面的搜索框当菜单下拉后会重叠。相机视频拍的设置里面有个EIS，删除这个菜单，默认开启EIS。视频画质默认720p。
电话中删除搜索框内的语音图标按钮: override/vendor/mediatek/proprietary/packages/apps/Dialer/java/com/android/dialer/ ...
Input输入框中加入小图标
今天遇到一个问题,怎么在Input输入框中加入小图标,实现效果如下: 解决方法是把图标当初背景图片,然后使用padding使得输入的内容向右移动,这样图标就显示出来了代码如下: .login .lo ...
elementui如何在input 框中搜索_在 Windows 10 中的文件资源管理器中删除搜索历史记录...
Windows 资源管理器带有搜索功能,用户可以通过该功能找到特定的文件或文件夹.默认情况下,您在搜索框中进行的所有搜索都会保存到其历史记录中.下次您在搜索框中输入内容时,它将在下拉对话框中显示最近输 ...
搜索图标在搜索框内的搜索框的编写（宛如绕口令一般的标题）
以模仿微博顶部搜索框为例: <div style="height: 28px;width: 468px;"><input type="text" ...
【bug解决】ios 15 type=“search“ 搜索类型的输入框自带搜索图标
问题在ios端的开发中,用到搜索框时,常常会发现搜索框会多余一个搜索图标,这其实是ios的某些版本,search类型的输入框会自带图标. 我们可以用css将其隐掉解决全局css加上 input[ ...
iOS中UISearchBar(搜索框)使用总结
2019独角兽企业重金招聘Python工程师标准>>> iOS中UISearchBar(搜索框)使用总结初始化:UISearchBar继承于UIView,我们可以像创建View那样 ...

input中加入搜索图标

input中加入搜索图标相关推荐

最新文章

热门文章