input中加入搜索图标

最新推荐文章于 2024-10-04 11:04:16 发布

转载

最新推荐文章于 2024-10-04 11:04:16 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章

200万优质内容无限畅学