input中加入搜索图标

本文介绍了如何在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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值