input中加入搜索图标

最新推荐文章于 2024-03-25 17:16:37 发布

weixin_30292843

最新推荐文章于 2024-03-25 17:16:37 发布

阅读量3k

点赞数 1

原文链接：http://www.cnblogs.com/pyspang/p/9732619.html

版权

本文介绍了如何在HTML输入框中添加搜索图标。通过创建一个包含label、input和i标签的div结构，并利用AmazeUI框架的图标，或者直接使用img标签插入图片来实现。CSS样式用于布局调整，JS代码可能用于实现交互效果。最终展示了一个简洁的带有搜索图标的输入框设计。

摘要由CSDN通过智能技术生成

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代码：（布局根据自己需要调整）