css相关:input输入框中加入搜索图标

<div style="margin-top: 0.5em;">

<div class="input-container">

<image src="/static/chemo2img/sousuo.png" style="height: 1.5em;" mode="heightFix"></image>

<input type="text" placeholder="输入车型关键字,如蔚来 特斯拉" />

</div>

</div>

.input-container {

position: relative;

}

.input-container image {

position: absolute;

top: 50%;

left: 0.5em;

/* 调整图标与输入框边缘的距离 */

transform: translateY(-50%);

pointer-events: none;

/* 确保图标不影响输入框点击 */

}

.input-container input {

padding-left: 2.1em;

/* 输入框左边距,确保文本不会覆盖图标 */

border: 1px solid #ccc;

border-radius: 0.9em;

padding-bottom: 0.4em;

padding-top: 0.3em;

}

相关推荐
AI视觉网奇2 分钟前
Uncaught SyntaxError: Failed to construct ‘RTCPeerConnection‘:
前端·javascript·html
再学一点就睡7 小时前
前端网络实战手册:15个高频工作场景全解析
前端·网络协议
num_killer7 小时前
小白的Langchain学习
java·python·学习·langchain
C_心欲无痕8 小时前
有限状态机在前端中的应用
前端·状态模式
C_心欲无痕8 小时前
前端基于 IntersectionObserver 更流畅的懒加载实现
前端
candyTong8 小时前
深入解析:AI 智能体(Agent)是如何解决问题的?
前端·agent·ai编程
期待のcode8 小时前
Java虚拟机的运行模式
java·开发语言·jvm
程序员老徐8 小时前
Tomcat源码分析三(Tomcat请求源码分析)
java·tomcat
柳杉8 小时前
建议收藏 | 2026年AI工具封神榜:从Sora到混元3D,生产力彻底爆发
前端·人工智能·后端
weixin_462446238 小时前
使用 Puppeteer 设置 Cookies 并实现自动化分页操作:前端实战教程
运维·前端·自动化